how to dynamically address a word/string with javascript in an html-document and then tag it?

Question

I have an HTML-document:

<html>
  <body>
    <p>
      A funny joke:
      <ul>
        <li>do you know why six is afraid of seven?
        <li>because seven ate nine.
      </ul>
      Oh, so funny!
    </p>
  </body>
</html>

Now I want to identify the first occurence of "seven" and tag it with

<span id="link1" class="link">

How can this be accomplished?

Do you have to parse the DOM-tree or is it possible to get the whole code within the body-section and then search for the word?

In both cases, after I found the word somewhere, how do you identify it and change it's DOM-parent to span (I guess that's what has to be done) and then add the mentioned attributes?

It's not so much a code I would expect, but what methods or concepts will do the job.

And I am not so much intersted in a framework-solution but in a pure javascript way.

Olegas · Accepted Answer · 2011-03-25T14:52:29.853

You need to find a DOM node with type TEXT_NODE (3) and containig your expected word. When you need to split a that node into three ones.

First is a TEXT_NODE which contains a text before the word you search, second one is a SPAN node containing the word you search, and third one is another TEXT_NODE containing an original node's tail (all after searched word).

Here is a source code...

<html>
   <head>
      <style type="text/css">
         .link {
            color: red;
         }
      </style>
   </head>
  <body>
    <p>
      A funny joke:
      <ul>
        <li>do you know why six is afraid of seven?
        <li>because seven ate nine.
      </ul>
      Oh, so funny!
    </p>
    <script type="text/javascript">
       function search(where, what) {
         var children = where.childNodes;
         for(var i = 0, l = children.length; i < l; i++) {
            var child = children[i], pos;
            if(child.nodeType == 3 && (pos = child.nodeValue.indexOf(what)) != -1) { // a TEXT_NODE
               var value = child.nodeValue;
               var parent = child.parentNode;
               var start = value.substring(0, pos);
               var end = value.substring(pos + what.length);
               var span = document.createElement('span');

               child.nodeValue = start;
               span.className = 'link';
               span.id = 'link1';
               span.innerHTML = what;
               parent.appendChild(span);
               parent.appendChild(document.createTextNode(end));
               return true;
            } else
               if(search(child, what))
                  break;
         }
         return false;
       }
       search(document.getElementsByTagName('body')[0], 'seven');
    </script>
  </body>
</html>

Well ... that's exactly the answer to my question ... cheers! — Raffael, Mar 26 '11 at 12:32

Martijn · Answer 2 · 2011-03-25T15:41:49.477

This is a function I’ve written a few years ago that searches for specific text, and highlights them (puts the hits in a span with a specific class name).

It walks the DOM tree, examining the text content. Whenever it finds a text node containing the looked-for text, it will replace that text node by three new nodes:

one text node with the text preceding the match,
one (newly created) span element containing the matching text,
and one text node with the text following the match.

This is the function as I have it. It’s part of a larger script file, but it should run independently as well. (I’ve commented out a call to ensureElementVisible which made the element visible, since the script also had folding and expanding capabilities).

It does one (other) thing that you probably won’t need: it turns the search text into a regular expression matching any of the multiple words.

function findText(a_text, a_top) {
    // Go through *all* elements below a_top (if a_top is undefined, then use the body)
    //  and check the textContent or innerText (only if it has textual content!)
    var rexPhrase = new RegExp(a_text.replace(/([\\\/\*\?\+\.\[\]\{\}\(\)\|\^\$])/g, '\\$1').replace(/\W+/g, '\\W*')
                                    , 'gi');
    var terms = [];
    var rexSearchTokens = /[\w]+/g;
    var match;
    while(match = rexSearchTokens.exec(a_text)) {
        terms.push(match[0]);
    }
    var rexTerm = new RegExp('\\b(' + terms.join('|') + ')', 'gi');

    var hits = [];
    walkDOMTree(a_top || document.body,
                function search(a_element) {
                    if (a_element.nodeName === '#text') {
                        if(rexPhrase.test(a_element.nodeValue)) {
//                          ensureElementVisible(a_element, true);
                            hits.push(a_element);
                        }
                    }
                });

    // highlight the search terms in the found elements
    for(var i = 0; i < hits.length; i++) {
        var hit = hits[i];
        var parent = hit.parentNode;

        if (parent.childNodes.length === 1) {
            // Remove the element from the hit list
            hits.splice(i, 1);

            var text = hit.nodeValue;
            parent.removeChild(hit);
            var match, prevLastIndex = 0;
            while(match = rexTerm.exec(text)) {
                parent.appendChild(document.createTextNode(text.substr(prevLastIndex, match.index - prevLastIndex)));
                var highlightedTerm = parent.appendChild(document.createElement('SPAN'));
                highlightedTerm.className = 'search-hit';
                highlightedTerm.appendChild(document.createTextNode(match[0]));
                prevLastIndex = match.index + match[0].length;

                // Insert the newly added element into the hit list
                hits.splice(i, 0, highlightedTerm);
                i++;
            }
            parent.appendChild(document.createTextNode(text.substr(prevLastIndex)));

            // Account for the removal of the original hit node
            i--;
        }
    }

    return hits;
}

Thanks for your input. What confuses me is your call to walkDOMTree(). Or is this function irrelevant to my question? — Raffael, Mar 26 '11 at 12:26

score 0 · Answer 3 · edited May 23 '17 at 12:26

0

I found the following so question: Find text string using jQuery?

This appears to be close to what you're trying to do. Now are you attempting to wrap just the text "seven" or are you attempting to wrap the entire content of the <li>?

edited May 23 '17 at 12:26

Community

1
1

answered Mar 23 '11 at 13:39

Dave G

9,639
36
41

thanks. but I would prefer a pure javascript-solution, no frameworks involved. – Raffael Mar 23 '11 at 13:44
@felixsigl har har, @Raffael1984 you're going to have to traverse through the DOM somehow and check the .textContent property (possibly use a regexp) of each node for what you're looking for. It's going to be pretty tedious unless you have a smaller context for what you're looking for. – Dave G Mar 23 '11 at 14:04

how to dynamically address a word/string with javascript in an html-document and then tag it?

3 Answers3