jquery replace matching text with html

Question

I want to use jQuery to dynamically enclose all text matching a given regexp with a specific tag. For example:

<div class="content">
<div class="spamcontainer">
Eggs and spam is better than ham and spam.
<img src="spam-and-eggs.jpg">
I do not like green eggs and spam, though.
</div>
</div>

If my regexp is ham|spam and I want to enclose with <span class='meat-product'> then I would want to transform to

<div class="content">
<div class="spamcontainer">
Eggs and <span class='meat-product'>spam</span> is better than <span class='meat-product'>ham</span> and <span class='meat-product'>spam</span>.
<img src="spam-and-eggs.jpg">
I do not like green eggs and <span class='meat-product'>spam</span>, though.
</div>
</div>

Here's my problem. I know how to do this with just text, and with just html:

$("div.content").text(function() {
    return $(this).text().replace(/ham|spam/, function(match) {
        return '<span class="meat-product">' + match + '</span>';
        });
});

and

$("div.content").html(function(_, html) {
    return html.replace(/ham|spam/, function(match) {
        return '<span class="meat-product">' + match + '</span>';
        });
});

but the former replaces text with text (so I get the text <span ... instead of a <span> element), and the latter matches ham and spam inside any HTML rather than in just text.

How can I match only text, but also be able to replace that text with HTML elements?

Answer 1

How can I match only text, but also be able to replace that text with HTML elements?

You could select all the descendant elements and text nodes and filter the set to only include text nodes. Then you can simply replace each text node with the modified string:

$(".content *").contents().filter(function() {
  return this.nodeType === 3;
}).replaceWith(function () {
  return this.textContent.replace(/(ham|spam)/g, '<span class="meat-product">$1</span>');
});

$(".content *").contents().filter(function() {
  return this.nodeType === 3;
}).replaceWith(function() {
  return this.textContent.replace(/(ham|spam)/g, '<span class="meat-product">$1</span>');
});

.meat-product {
  color: #f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="spamcontainer">
    Eggs and spam is better than ham and spam.
    <img src="spam-and-eggs.jpg">I do not like green eggs and spam, though.
  </div>
</div>

• Use the universal selector, *, to select all descendant elements (of course you could also use $('.content').children(), but that will only go one level deep... you will probably encounter nested elements which means that you will need to retrieve all text nodes, therefore I used * to select the contents of all the descendant elements).
• The .contents() method gets all the text nodes and children elements.
• Then filter the set so that only text nodes are included since we don't want to replace any HTML. The nodeType property value of a text node is 3.
• Finally, the .replaceWith() method is used to update each text node with the replaced text string. The good thing about the .replaceWith() method is that you can replace the text with an HTML string.
• You can also shorten your .replace() method by using a capturing group like in the example above. Then you can simply substitute $1 between the span elements.

Answer 2

Here's a solution that covers the trivial case shown and is only presented to show how to walk through text nodes with jQuery. It would require some recursive DOM walking if you have to deal with deeper nesting

var reg = /ham|spam/g;

$('.content').children().contents().each(function() {
    if (this.nodeType === 3) {
        var txt = this.textContent;
        if (txt.match(reg)) {
            $(this).replaceWith(textToHtml(this));
        }
    } 
});


function textToHtml(node) {
    return node.textContent.replace(reg, function(match) {
        return '<span class="meat-product">' + match + '</span>';
    })
}

As mentioned in comments there are battle tested plugins that will do this for you

DEMO

Answer 3

I ended up using Josh Crozier's solution with a twist. The problem is that if there are & < > characters in the text, they need to be escaped if they are being used as the HTML argument to replaceWith(). And they can't be universally escaped if you are inserting HTML intentionally. So I did something like this:

function escapeHTML(s) {
    return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}
$("div.content *").contents().filter(function() {
    return this.nodeType === 3;
}).each(function() {
    var node = $(this);
    var text = node.text();
    var occurrences = 0;
    var html = text.replace(/(ham|spam)|.+?/g, function(match, p1) {                
            if (p1)
            {   
                // we found ham or spam
                ++occurrences;
                return '<span class="meat-product">'
                    + escapeHTML(match)    // technically not necessary 
                                 // since we know "ham" and "spam"
                                 // don't need escaping, but some regex's
                                 // need this
                    + '</span>';
            }
            else
            {
                return escapeHTML(match);
            }
        });
    if (occurrences > 0)
    {
        node.replaceWith(html);
    }
});

Answer 4

I appreciate that the OP specifically stated

I want to use jQuery

but I wanted to see if I could build a plain vanilla javascript solution. (I have yet to start learning jQuery).

In the end my solution involved 3 steps:

1. Identify which elements have text nodes (which match the regex) as direct childNodes;
2. Clone each of these elements and rebuild them from empty, using the original elements as templates;
3. Remove each original element, leaving the newly built clones

/* ### Build an array of 'matching elements' which have (as direct childNodes) text nodes containing 'spam' or 'ham' */

var matchingElements = [];
var allElements = document.querySelectorAll('*:not(script)');

for (var i = 0; i < allElements.length; i++) {
 var elementAdded = false;
    for (var j = 0; j < allElements[i].childNodes.length; j++) {
        if (allElements[i].childNodes[j].nodeValue === null) {continue;}
        if (allElements[i].childNodes[j].nodeValue.match(/ham|spam/gi) === null) {continue;}
        if (elementAdded !== true) {
         matchingElements.push(allElements[i]);
         elementAdded = true;
        }
    }
}

/* ### Clone each matched element and rebuild it, replacing unstructured text nodes */
var x;
var y;
var newTextNode;
var clonedElements = [];
var meatProducts = document.getElementsByClassName('meat-product');

/* Create (empty) clone of matched element */

for (var k = 0; k < matchingElements.length; k++) {
        clonedElements[k] = matchingElements[k].cloneNode(false);
        matchingElements[k].parentNode.insertBefore(clonedElements[k],matchingElements[k]);

    for (var l = 0; l < matchingElements[k].childNodes.length; l++) {

/* Add non-text nodes to cloned element */

        if (matchingElements[k].childNodes[l].nodeValue === null) {
            var clonedNode = matchingElements[k].childNodes[l].cloneNode(true);
            clonedElements[k].appendChild(clonedNode);
            continue;
        }

/* Add text nodes which don't contain 'spam' or 'ham' to cloned element */

        if (matchingElements[k].childNodes[l].nodeValue.match(/ham|spam/gi) === null) {
            var clonedNode = matchingElements[k].childNodes[l].cloneNode(true);
            clonedElements[k].appendChild(clonedNode);
            continue;
        }

/* Restructure and add text nodes which do contain 'spam' or 'ham' to cloned element */

        var meatLarder = matchingElements[k].childNodes[l].nodeValue.match(/ham|spam/gi);
        var textNodeString = matchingElements[k].childNodes[l].nodeValue;

        for (m = 0; m < meatLarder.length; m++) {
        x = 0;
        y = textNodeString.indexOf(meatLarder[m]);

        newTextNode = document.createTextNode(textNodeString.substring(x,y));
        clonedElements[k].appendChild(newTextNode);

        textNodeString = textNodeString.substring(y);

        y = meatLarder[m].length;

        var newSpan = document.createElement('span');
        var newMeatProduct = document.createTextNode(meatLarder[m]);
        var newClass = document.createAttribute('class');
        newClass.value = 'meat-product';
        newSpan.setAttributeNode(newClass);
        newSpan.appendChild(newMeatProduct);
        clonedElements[k].appendChild(newSpan);

        textNodeString = textNodeString.substring(y);
        }

        newTextNode = document.createTextNode(textNodeString);
        clonedElements[k].appendChild(newTextNode);
    }

/* Remove original matched element from document, leaving only the newly-built cloned element */
    matchingElements[k].parentElement.removeChild(matchingElements[k]);
}

<div class="content">
<div class="spamcontainer">
Eggs and spam is better than ham and spam.
<img src="spam-and-eggs.jpg">
I do not like green eggs and spam, though.
</div>
</div>