Home/ Questions/Q 787283
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T21:10:38+00:00

My current project requires locating an array of strings within an element’s text content,

  • 0

My current project requires locating an array of strings within an element’s text content, then wrapping those matching strings in <a> elements using JavaScript (requirements simplified here for clarity). I need to avoid jQuery if at all possible – at least including the full library.

For example, given this block of HTML:

<div>
  <p>This is a paragraph of text used as an example in this Stack Overflow
     question.</p>
</div>

and this array of strings to match:

['paragraph', 'example']

I would need to arrive at this:

<div>
  <p>This is a <a href="http://www.example.com/">paragraph</a> of text used
     as an <a href="http://www.example.com/">example</a> in this Stack
     Overflow question.</p>
</div>

I’ve arrived at a solution to this by using the innerHTML() method and some string manipulation – basically using the offsets (via indexOf()) and lengths of the strings in the array to break the HTML string apart at the appropriate character offsets and insert <a href="http://www.example.com/"> and </a> tags where needed.

However, an additional requirement has me stumped. I’m not allowed to wrap any matched strings in <a> elements if they’re already in one, or if they’re a descendant of a heading element (<h1> to <h6>).

So, given the same array of strings above and this block of HTML (the term matching has to be case-insensitive, by the way):

<div>
  <h1>Example</a>
  <p>This is a <a href="http://www.example.com/">paragraph of text</a> used
     as an example in this Stack Overflow question.</p>
</div>

I would need to disregard both the occurrence of “Example” in the <h1> element, and the “paragraph” in <a href="http://www.example.com/">paragraph of text</a>.

This suggests to me that I have to determine which node each matched string is in, and then traverse its ancestors until I hit <body>, checking to see if I encounter a <a> or <h_> node along the way.

Firstly, does this sound reasonable? Is there a simpler or more obvious approach that I’ve failed to consider? It doesn’t seem like regular expressions or another string-based comparison to find bounding tags would be robust – I’m thinking of issues like self-closing elements, irregularly nested tags, etc. There’s also this…

Secondly, is this possible, and if so, how would I approach it?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You should probably iterate the dom elements. Here’s a simple recursive dom iterator, you can fill in the rest:

    function iterateDom (node) {
switch (node.nodeType) {
    case 1: // ELEMENT_NODE
        {
        if (node.tagName != "H1") {
            for (var i=0; i<node.childNodes.length; i++)
                    iterateDom(node.childNodes[i]);
            }
        }
        break;
    case 3: //TEXT_NODE
        {
        // node.nodeValue = node.nodeValue.replace(...);
        break;
    }
return true;
}
    • 0