Replace words in html with links, but prefer longer words if search term collide

Question

I am having trouble with the following task:

I need to enrich a string containing html by linking some of the words it contains to "read more" pages. Unfortunately when the search terms I want to replace begin to overlap it becomes tricky. I either end up with nested links or, like in the example below, with longer terms not being replaced.

let html = `So there is this Text in HTML containing words.
I want to link some special words to their read more pages.
But if search terms contain each other they re not linked correctly. Like the ones above.`;

const linkTo = [
    {term: 'words', link: 'https://example.com/words'},
    {term: 'special words', link: 'https://example.com/special_words'},
];

for(const pair of linkTo){
    const re = new RegExp(pair.term, "g");
    html = html.replace(re, `${pair.term}`);
}

document.body.innerHTML = html;

In the example above the "special words" in line 2 should link to its own page.

Any Ideas?

Thanks in advance!

user_3832970 · Answer

You need to sort the keys by length in the descending order and create a single regex from the terms:

let html = `So there is this Text in HTML containing words.
I want to link some special words to their read more pages.
But if search terms contain each other they re not linked correctly. Like the ones above.`;

const linkTo = [
    {term: 'words', link: 'https://example.com/words'},
    {term: 'special words', link: 'https://example.com/special_words'},
];
const keys = linkTo.map(x => x.term).sort((a, b) => b.length-a.length)
const re = new RegExp("\b(?:" + keys.join("|") + ")\b", "g");
html = html.replace(re, (m) => `${m}`);
document.body.innerHTML = html;

Note I am not escaping special chars for the time being since all your terms consist of word chars, and that is why I add \b on both ends, word boundaries.

In case you need to search for terms that may contain special chars you will need to use

const keys = linkTo.map(x => x.term.replace(/[-/\^$*+?.()|[\]{}]/g, '\$&')).sort((a, b) => b.length-a.length)
const re = new RegExp("(?


Some more details:

linkTo.map(x => x.term).sort((a, b) => b.length-a.length) - gets the terms from the linkTo items and sorts them by length in descending order, the longer come first. It is necessary because The Regex Engine Is Eager and the first alternative "wins" and make the regex engine stop processing other alternatives
new RegExp("\b(?:" + keys.join("|") + ")\b", "g") build a regex like \b(?:special words|words)\b
.replace(re, (m) => `${m}`) - parses a string only once, and replaces each match with the corresponding link.

Special chars supporting solution:


let html = `So there is this Text in HTML containing words.
I want to link some special words to their read more pages.
But if search terms contain each other they re not linked correctly. Like the ones above.`;

const linkTo = [
    {term: 'words', link: 'https://example.com/words'},
    {term: 'special words', link: 'https://example.com/special_words'},
];
const keys = linkTo.map(x => x.term.replace(/[-/\^$*+?.()|[\]{}]/g, '\$&')).sort((a, b) => b.length-a.length)
const re = new RegExp("(\W|^)(" + keys.join("|") + ")(?!\w)", "g");
html = html.replace(re, (x,y,z) => `${y}${x}`);
document.body.innerHTML = html;

user_14780760 · Answer

You can just use the string.replace() function:

let html = `So there is this Text in HTML containing words.
I want to link some special words to their read more pages.
But if search terms contain each other they re not linked correctly. Like the ones above.`;

const linkTo = [
    {term: 'words', link: 'https://example.com/words'},
    {term: 'special words', link: 'https://example.com/special_words'},
];

for(const pair of linkTo){
   html = html.replace(pair.term, `${pair.term}`);
}

document.body.innerHTML = html;

Replace words in html with links, but prefer longer words if search term collide

2 Answers