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

Unable to retrieve JSON data from php script, but able to successfully retrieve it from file.json

The Problem with AJAX Error Handling Customization

Exploring the process of retrieving array elements from an AJAX response transmitted from PHP

Formatting HTTP HTML response in Vue.js can be achieved by utilizing various methods and techniques

Converting 2D pixel art into 3D coordinates with ThreeJS

Effective implementation of the useReducer hook across various React components to manage form state

The action of POSTing to the api/signup endpoint is

The mistake is indicating the npm title of a package that is not present

Generate a highcharts graph by utilizing AJAX and JSON data

The issue of variable being undefined in JSON for JavaScript and Python

Currently waiting for the $resolved property of the AngularJs service

Creating a dynamic JSON object and retrieving the response in a JSP for data-driven documents

Concealing axis lines within the initial circular grid or opting not to include them

What is the process for utilizing AngularJS's multiple $http calls to retrieve data from a single PHP file?

React - Received an unexpected string containing a template expression with no curly braces present in the string

What is the process for uploading an HTML input file in segments?

What is a way to transfer an Object from one Vue.js component to another without relying on vuex?

Phonegap fails to make a successful login Ajax call to Yii

OctoberCMS Form submission failure (AJAX handler not located)

Capturing errors during function declaration in JavaScript