Replacing text with HTML using Cheerio in NodeJS

Question

I want to replace all the occurrences of a word inside a structured HTML with a tag.

For example, given an HTML like this

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor, magna nec sollicitudin varius, ligula nisi finibus nulla, vel posuere libero erat eu tortor.
</p>
<p>
    <ul>
        <li>Lorem</li>
        <li>ipsum</li>
        <li>dolor</li>
        <li>sit</li>
        <li>amet</li>
    </ul>
</p>
<p>
    Lorem <b>ipsum</b> <span><em>dolor</em></span> sit amet, consectetur adipiscing elit.
</p>

I would like to replace all the occurrences of the word 'ipsum' with this tag

<a href="https://www.google.com/search?q=ipsum">ipsum</a>

In this case, I tried a very simple solution that did not work:

const $ = cheerio.load(lorem_ipsum_html);
let words = $.text().trim().split(' ');
for (let t in words) {
    let res = words[t];
    if (words[t] == 'ipsum') res = '<a href="https://www.google.com/search?q=ipsum">ipsum</a>';
    $.html().replace(words[t], res);
}
return $.html();  

In this case the function returns the unchanged html, even though the replace looked like it worked. On top of that, I also tried to port several jQuery implementations such as:

Replace text with HTML element

Using .replace to replace text with HTML?

with no luck.

Answer 1

I ended up with this (not so clean) solution. It's not the best thing in the world but it works. There's still room for improvement here.

let $ = cheerio.load(lorem_ipsum_html);
let words = $.text().trim().split(' ');
for (let t in words) {
    let res =  words[t];
    if(words[t] == 'ipsum') res = '<a href="https://www.google.com/search?q=ipsum">ipsum</a>';
    let $ = cheerio.load($.html().replace(words[t], res));
}
return $.html();

In this case the HTML structure remain intact, and the anchor tags are just injected in the right place.

<p>
    Lorem <a href="https://www.google.com/search?q=ipsum">ipsum</a> dolor sit amet, consectetur adipiscing elit. Fusce porttitor, magna nec sollicitudin varius, ligula nisi finibus nulla, vel posuere libero erat eu tortor.
</p>
<p>
    <ul>
        <li>Lorem</li>
        <li><a href="https://www.google.com/search?q=ipsum">ipsum</a></li>
        <li>dolor</li>
        <li>sit</li>
        <li>amet</li>
    </ul>
</p>
<p>
    Lorem <b><a href="https://www.google.com/search?q=ipsum">ipsum</a></b> <span><em>dolor</em></span> sit amet, consectetur adipiscing elit.
</p>