Using Javascript to emphasize Ajax Response

Question

Using Javascript to emphasize Ajax Response

I am faced with a challenge of highlighting specific words within text received from an ajax response, before generating HTML code and inserting it into the DOM. At the moment, I am utilizing the following code snippet:

function highlightWords(line, word, htmltag) {
    var tag = htmltag || ["<b>", "</b>"];
    var regex = new RegExp('(' + preg_quote(word) + ')', 'gi');
    return line.replace(regex, tag[0] + "$1" + tag[1]);
}

function preg_quote(str) {
    return (str + '').replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<<>>\|\:])/g, "\\$1");
}

However, this method does not allow for highlighting individual words if the query is a phrase like sit behind. It highlights the entire phrase as one unit rather than each word separately. Additionally, it does not take HTML tags into consideration leading to less aesthetically pleasing results when the query includes a term like span...

I have come across different libraries that handle text highlighting more effectively, such as or

However, these libraries tend to focus on highlighting existing content within the DOM.

My scenario involves receiving an ajax response which needs to be converted into HTML using JS before being inserted into the parent container using DOM7 (similar to jQuery). Hence, I prefer to highlight the text before generating the HTMLString and pasting it into the DOM.

Any suggestions?

javascript ajax highlight dom7

Answer 1

Answer №1

Utilizing a library is definitely the way to go for this task. I personally recommend using an excellent library called mark.js.

This library can be used independently or with jQuery, giving you great flexibility in implementation.

Initiate the AJAX request.
Inject the string into the DOM.
Invoke the Mark.js API on the loaded content.

Below is a sample code snippet:

document.addEventListener('DOMContentLoaded', getText);

function getText() {
  const headline = document.getElementsByTagName("h1")[0];
  const p = document.getElementsByTagName("p")[0];

  fetch('https://jsonplaceholder.typicode.com/posts/1').
  then(response => response.json()).
  then(json => {
    console.log(json);
    headline.innerHTML = json.title;
    p.innerHTML = json.body;
    addMark('aut facere');
  });
}

function addMark(keyword) {
  var markInstance = new Mark(document.querySelector('.context'));
  var options = {
    separateWordSearch: true
  };
  markInstance.unmark({
    done: function() {
      markInstance.mark(keyword, options);
    },
  });
}

<script src="https://cdn.jsdelivr.net/mark.js/8.6.0/mark.min.js"></script>
<div class="context">
  <h1></h1>
  <p></p>
</div>

Answer 2

Utilizing a library is definitely the way to go for this task. I personally recommend using an excellent library called mark.js.

This library can be used independently or with jQuery, giving you great flexibility in implementation.

Initiate the AJAX request.
Inject the string into the DOM.
Invoke the Mark.js API on the loaded content.

Below is a sample code snippet:

document.addEventListener('DOMContentLoaded', getText);

function getText() {
  const headline = document.getElementsByTagName("h1")[0];
  const p = document.getElementsByTagName("p")[0];

  fetch('https://jsonplaceholder.typicode.com/posts/1').
  then(response => response.json()).
  then(json => {
    console.log(json);
    headline.innerHTML = json.title;
    p.innerHTML = json.body;
    addMark('aut facere');
  });
}

function addMark(keyword) {
  var markInstance = new Mark(document.querySelector('.context'));
  var options = {
    separateWordSearch: true
  };
  markInstance.unmark({
    done: function() {
      markInstance.mark(keyword, options);
    },
  });
}

<script src="https://cdn.jsdelivr.net/mark.js/8.6.0/mark.min.js"></script>
<div class="context">
  <h1></h1>
  <p></p>
</div>

Answer 3

Answer №2

My solution for highlighting the response of an ajax request is below:

$.ajax({
    url : url,
    type : 'POST',
    success: function(response) {
        // Implementing Highlight
        let searchTerm = 'word';
        $container = $("#selector");
        $container.show().unhighlight();
        if (searchTerm){
            $container.highlight(searchTerm, {
                done: function() {
                    $container.not(":has(mark)").hide();
                }
            });
        }
    }
});

Answer 4

My solution for highlighting the response of an ajax request is below:

$.ajax({
    url : url,
    type : 'POST',
    success: function(response) {
        // Implementing Highlight
        let searchTerm = 'word';
        $container = $("#selector");
        $container.show().unhighlight();
        if (searchTerm){
            $container.highlight(searchTerm, {
                done: function() {
                    $container.not(":has(mark)").hide();
                }
            });
        }
    }
});

Answer 5

Answer №3

Important note: Be cautious as this code utilizes DOM7 in accordance with the question

Summary: Rather than adding an entire HTML string to your #container, consider appending normal text sections as text and highlighted elements as separate elements. This approach allows for easy styling customization.

var text // response from ajax call
var strQuery = 'sit behind' // search query 

var queryWords = strQuery.split(' ')
var textWords = text.split(' ')
var bufferNormalWords  = []

textWords.forEach(function (word) {
    if (queryWords.indexOf(word) != -1) { // word found
      var normalWords = bufferNormalWords.splice(0, buffer.length) // clear buffer
      // Your DOM7 logic here
      $$('#container').add('span').text(normalWords.join(' ')) // normal text
      $$('#container').add('span').css('color', 'red').text(word + ' ') // highlight in red          
    }
    else bufferNormalWords.push(word)
})

Avoid converting text to HTMLStrings unnecessarily; simply manipulate the text and create appropriate elements for styling using DOM7.

Answer 6

Important note: Be cautious as this code utilizes DOM7 in accordance with the question

Summary: Rather than adding an entire HTML string to your #container, consider appending normal text sections as text and highlighted elements as separate elements. This approach allows for easy styling customization.

var text // response from ajax call
var strQuery = 'sit behind' // search query 

var queryWords = strQuery.split(' ')
var textWords = text.split(' ')
var bufferNormalWords  = []

textWords.forEach(function (word) {
    if (queryWords.indexOf(word) != -1) { // word found
      var normalWords = bufferNormalWords.splice(0, buffer.length) // clear buffer
      // Your DOM7 logic here
      $$('#container').add('span').text(normalWords.join(' ')) // normal text
      $$('#container').add('span').css('color', 'red').text(word + ' ') // highlight in red          
    }
    else bufferNormalWords.push(word)
})

Avoid converting text to HTMLStrings unnecessarily; simply manipulate the text and create appropriate elements for styling using DOM7.

Answer 7

Answer №4

In the scenario where your ajax response includes HTML, it may be challenging to avoid creating DOM elements initially. The following code effectively accomplishes the task, even if the query involves the presence of span and the ajax results contain <span>.

        function highlightWords(line, word, htmltag) {
            var words = word.split(/\s+/);
            var tag = htmltag || ["<b>", "</b>"];

            var root = document.createElement("div");
            root.innerHTML = line;
            root = _highlightWords(words, tag, root);
            return root.innerHTML;
        }

        // Recursive examination of the generated DOM element
        function _highlightWords(words, htmlTag, el) {
            var children = [];

            el.childNodes.forEach(function(el) {
                if (el.nodeType != 3) { // excluding Text Type
                    var highlighted = _highlightWords(words, htmlTag, el);
                    children.push(highlighted);
                } else {
                    var line = _highlight(el.textContent, words, htmlTag);
                    var span = document.createElement("span");
                    span.innerHTML = line;
                    children.push(span);
                }
            });

            // Clearing the element's HTML contents to add new children
            el.innerHTML = "";
            children.forEach(function (c) { el.appendChild(c)});
            return el;
        }

        // Identifying and highlighting any matching words
        function _highlight(line, words, htmlTag) {
            words.forEach(function(singleWord) {
                if (!!singleWord) {
                    singleWord = htmlEscape(singleWord);
                    line = line.replace(singleWord, htmlTag[0] + singleWord + htmlTag[1]);
                }
            });
            return line;
        }

Answer 8

In the scenario where your ajax response includes HTML, it may be challenging to avoid creating DOM elements initially. The following code effectively accomplishes the task, even if the query involves the presence of span and the ajax results contain <span>.

        function highlightWords(line, word, htmltag) {
            var words = word.split(/\s+/);
            var tag = htmltag || ["<b>", "</b>"];

            var root = document.createElement("div");
            root.innerHTML = line;
            root = _highlightWords(words, tag, root);
            return root.innerHTML;
        }

        // Recursive examination of the generated DOM element
        function _highlightWords(words, htmlTag, el) {
            var children = [];

            el.childNodes.forEach(function(el) {
                if (el.nodeType != 3) { // excluding Text Type
                    var highlighted = _highlightWords(words, htmlTag, el);
                    children.push(highlighted);
                } else {
                    var line = _highlight(el.textContent, words, htmlTag);
                    var span = document.createElement("span");
                    span.innerHTML = line;
                    children.push(span);
                }
            });

            // Clearing the element's HTML contents to add new children
            el.innerHTML = "";
            children.forEach(function (c) { el.appendChild(c)});
            return el;
        }

        // Identifying and highlighting any matching words
        function _highlight(line, words, htmlTag) {
            words.forEach(function(singleWord) {
                if (!!singleWord) {
                    singleWord = htmlEscape(singleWord);
                    line = line.replace(singleWord, htmlTag[0] + singleWord + htmlTag[1]);
                }
            });
            return line;
        }

Using Javascript to emphasize Ajax Response

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Please be aware that any fabricated comments will not be displayed in the posts object

Check if the page has been loaded using Jquery

"Troubleshooting issue: Vue deep watch failing to detect changes in object properties

dividing an HTML string into individual variables using JavaScript

Sending Ajax forms using Mootools with various sending methods and versions

iOS fixed positioning and scrolling

difficulty in making an https request

Problem concerning the window object in a React functional component

Add a variety of input values to a div in designated spots

The issue arises when the view fails to load while simulating a backend

What is the optimal approach for managing server-side data stored as a JavaScript variable?

Determining the value of an element by examining the clicked element

How can you use ajax to update the content of a single div in Yii?

pointing out the existing issues with the menu

The issue of not displaying results in a DIV when using CakePHP 2 and jQuery

Tips for converting a number into a percentage with two decimal places using FormatJs Message Syntax

What is the most effective method for testing event emitters?

Issue encountered in Angularjs during upgrade process from version 1.2.27 to 1.4.7

Implement rounded corners on D3js Donut Chart

The AngularJS application appears to have trouble accessing a local text file, even when it is deployed on