Avoid endless repetition with Document.createNodeIterator()

Question

Avoid endless repetition with Document.createNodeIterator()

My goal is to highlight case-insensitive words in the DOM. For instance, I'd like to highlight stackoverflow with

<mark>stackoverflow</mark>

and Google with <mark>Google</mark>

To achieve this, my approach involves utilizing Document.createNodeIterator() which specifically filters out non-text nodes.

window.onload = function() {
  getChildren(document.body);
}

function getChildren(mytag) {

  const nodeIter = document.createNodeIterator(
    mytag,
    NodeFilter.SHOW_TEXT,
    (node) => {
      return NodeFilter.FILTER_ACCEPT
    }
  );
  const mark = document.createElement("mark")
  let node = nodeIter.nextNode();
  while (node) {
    const parent = node.parentElement;
    const innerHTML = parent.innerHTML;
    const word = "stackoverflow"
    const regex = new RegExp(`(${word})`, 'ig');
    parent.removeChild(node)
    parent.innerHTML = innerHTML.replace(regex, "<mark>$1</mark>");
    node = nodeIter.nextNode()
  }
}

<h1>Iterating DOM in JavaScript</h1>

<p>
  A paragraph.
</p>

<div>
  <a href="https://stackoverflow.com/">Stackoverflow</a> is QA website.
</div>

<ul>
  <li>Stackoverflow</li>
  <li>Google</li>
  <li>Apple</li>
</ul>

The existing code seems to have a flaw as it iterates infinitely. Interestingly, changing the highlighted word from stackoverflow to

<mark>duckduckgo</mark>

prevents infinite iteration. How can this issue be resolved?

javascript dom

Answer 1

Answer №1

The issue appears to arise when replacing the node, causing the node iterator to endlessly loop through the same content.

To enhance this process, consider implementing two improvements:

Include the filtering logic within the filter callback to reject unwanted nodes right away instead of examining text nodes individually.
Utilize Node#replaceWith() for node replacement. It can be paired with Node#cloneNode() for constructing replacements, or you have the option to use other methods. If preferred, replaceWith() does support a DOMString as well.

window.onload = function() {
  getChildren(document.body);
}

function getChildren(mytag) {
  const word = "stackoverflow"
  const regex = new RegExp(`(${word})`, 'ig');
  
  const nodeIter = document.createNodeIterator(
    mytag,
    NodeFilter.SHOW_TEXT,
    (node) => {
      //ignore script and style tags
      if (node.parent?.tagName === "SCRIPT" || node.parent?.tagName === "STYLE")
        return NodeFilter.FILTER_REJECT;
        
      //ignore anything already marked
      if (node.parent?.tagName === "MARK")
        return NodeFilter.FILTER_REJECT;
        
      //ignore anything not matching regex
      if (!regex.test(node.data))
        return NodeFilter.FILTER_REJECT;
        
      return NodeFilter.FILTER_ACCEPT;
    }
  );
  let node = nodeIter.nextNode();
  while (node) {
    const parent = node.parentElement;
    const mark = document.createElement("mark");
    mark.append(node.cloneNode());
    
    node.replaceWith(mark);
    node = nodeIter.nextNode()
  }
}

<h1>Iterating DOM in JavaScript</h1>

<p>
  A paragraph.
</p>

<div>
  <a href="https://stackoverflow.com/">Stackoverflow</a> is QA website.
</div>

<ul>
  <li>Stackoverflow</li>
  <li>Google</li>
  <li>Apple</li>
</ul>

Here's a more organized version of the code that may enhance readability:

window.onload = function() {
  getChildren(document.body);
}

function getChildren(mytag) {
  const nodeIter = unmarkedTextIterator(mytag, /stackoverflow/ig);
  
  for (const node of iterate(nodeIter)) {
    node.replaceWith(mark(node));
  }
}


//helper functions to break up the logic into logical parts:


/*
 * Create a DOM NodeIterator for text nodes only. 
 * @param {Node} root - where to start.
 * @param {RegExp} regex - optional filter for what text to watch. Defaults to returning everyting.
 * @return text node which is not in <mark> or <script> or <style> tag and passes the regex filter.
 */
const unmarkedTextIterator = (root, regex = /.*/) =>
  document.createNodeIterator(
    root,
    NodeFilter.SHOW_TEXT,
    (node) => {
      //ignore script and style tags
      if (node.parent?.tagName === "SCRIPT" || node.parent?.tagName === "STYLE")
        return NodeFilter.FILTER_REJECT;
        
      //ignore anything already marked
      if (node.parent?.tagName === "MARK")
        return NodeFilter.FILTER_REJECT;
        
      //ignore anything not matching regex
      if (!regex.test(node.data))
        return NodeFilter.FILTER_REJECT;
        
      return NodeFilter.FILTER_ACCEPT;
    }
  );

/* 
 * Convenience generator function to easily work with NodeIterors
 * @generator
 * @param {NodeIterator} nodeIterator
 * @yields {Node} that nodeIterator gives
 */
function* iterate(nodeIterator) {
  while (node = nodeIterator.nextNode()) {
    yield node;
  }
}

/* 
 * Wraps a node in <mark> tag
 * @param {Node} node
 * @return {Node}
 */
const mark = node => {
  const mark = document.createElement("mark");
  mark.append(node.cloneNode());
  
  return mark;
}

<h1>Iterating DOM in JavaScript</h1>

<p>
  A paragraph.
</p>

<div>
  <a href="https://stackoverflow.com/">Stackoverflow</a> is QA website.
</div>

<ul>
  <li>Stackoverflow</li>
  <li>Google</li>
  <li>Apple</li>
</ul>

Answer 2

The issue appears to arise when replacing the node, causing the node iterator to endlessly loop through the same content.

To enhance this process, consider implementing two improvements:

Include the filtering logic within the filter callback to reject unwanted nodes right away instead of examining text nodes individually.
Utilize Node#replaceWith() for node replacement. It can be paired with Node#cloneNode() for constructing replacements, or you have the option to use other methods. If preferred, replaceWith() does support a DOMString as well.

window.onload = function() {
  getChildren(document.body);
}

function getChildren(mytag) {
  const word = "stackoverflow"
  const regex = new RegExp(`(${word})`, 'ig');
  
  const nodeIter = document.createNodeIterator(
    mytag,
    NodeFilter.SHOW_TEXT,
    (node) => {
      //ignore script and style tags
      if (node.parent?.tagName === "SCRIPT" || node.parent?.tagName === "STYLE")
        return NodeFilter.FILTER_REJECT;
        
      //ignore anything already marked
      if (node.parent?.tagName === "MARK")
        return NodeFilter.FILTER_REJECT;
        
      //ignore anything not matching regex
      if (!regex.test(node.data))
        return NodeFilter.FILTER_REJECT;
        
      return NodeFilter.FILTER_ACCEPT;
    }
  );
  let node = nodeIter.nextNode();
  while (node) {
    const parent = node.parentElement;
    const mark = document.createElement("mark");
    mark.append(node.cloneNode());
    
    node.replaceWith(mark);
    node = nodeIter.nextNode()
  }
}

<h1>Iterating DOM in JavaScript</h1>

<p>
  A paragraph.
</p>

<div>
  <a href="https://stackoverflow.com/">Stackoverflow</a> is QA website.
</div>

<ul>
  <li>Stackoverflow</li>
  <li>Google</li>
  <li>Apple</li>
</ul>

Here's a more organized version of the code that may enhance readability:

window.onload = function() {
  getChildren(document.body);
}

function getChildren(mytag) {
  const nodeIter = unmarkedTextIterator(mytag, /stackoverflow/ig);
  
  for (const node of iterate(nodeIter)) {
    node.replaceWith(mark(node));
  }
}


//helper functions to break up the logic into logical parts:


/*
 * Create a DOM NodeIterator for text nodes only. 
 * @param {Node} root - where to start.
 * @param {RegExp} regex - optional filter for what text to watch. Defaults to returning everyting.
 * @return text node which is not in <mark> or <script> or <style> tag and passes the regex filter.
 */
const unmarkedTextIterator = (root, regex = /.*/) =>
  document.createNodeIterator(
    root,
    NodeFilter.SHOW_TEXT,
    (node) => {
      //ignore script and style tags
      if (node.parent?.tagName === "SCRIPT" || node.parent?.tagName === "STYLE")
        return NodeFilter.FILTER_REJECT;
        
      //ignore anything already marked
      if (node.parent?.tagName === "MARK")
        return NodeFilter.FILTER_REJECT;
        
      //ignore anything not matching regex
      if (!regex.test(node.data))
        return NodeFilter.FILTER_REJECT;
        
      return NodeFilter.FILTER_ACCEPT;
    }
  );

/* 
 * Convenience generator function to easily work with NodeIterors
 * @generator
 * @param {NodeIterator} nodeIterator
 * @yields {Node} that nodeIterator gives
 */
function* iterate(nodeIterator) {
  while (node = nodeIterator.nextNode()) {
    yield node;
  }
}

/* 
 * Wraps a node in <mark> tag
 * @param {Node} node
 * @return {Node}
 */
const mark = node => {
  const mark = document.createElement("mark");
  mark.append(node.cloneNode());
  
  return mark;
}

<h1>Iterating DOM in JavaScript</h1>

<p>
  A paragraph.
</p>

<div>
  <a href="https://stackoverflow.com/">Stackoverflow</a> is QA website.
</div>

<ul>
  <li>Stackoverflow</li>
  <li>Google</li>
  <li>Apple</li>
</ul>

Avoid endless repetition with Document.createNodeIterator()

Answer №1

Similar questions

Is Express capable of serving static files from a hidden folder with dot file?

Display the Image Element in Angular only when the image actually exists

Verify if the upcoming element possesses a particular class

What is the best way to save multiple values using a single input box in reactjs?

Ways to verify if a value already exists in a pre-existing JSON file using Node.js

Determine whether the last day of the month falls within the designated time frame, and

Using jQuery to obtain the object context while inside a callback function

Issue with table sorting functionality following relocation of code across pages

How many records are there in Mongo DB?

Transforming text elements into JSON format

Tips for passing a variable from one function to another file in Node.js

JavaScript: Preventing Duplicate Keystrokes in Keyboard Input

The lower section of the scrollbar is not visible

How can you implement a bootstrap navigation bar in a vue.js project?

What is the best way to send multiple requests consecutively using the riot-lol-api?

Identifying changes in Android volume settings via Progressive Web App (PWA)

Utilizing the arrayUnion method to modify an array within Firestore

Having difficulty focusing on the Dropdown component in Primereact

Incorporate an external object not native to the Angular framework within a factory

Constantly retrieving AngularJS JSON data on the details page