Search For Words, Replace With Links

Question

I have an array like this

var words = [
    {
        word: 'Something',
        link: 'http://www.something.com'
    },
    {
        word: 'Something Else',
        link: 'http://www.something.com/else'
    }
];

I want it to search the page for word and replace it with link. Is there an efficient way of doing this? It seems it may be CPU hungry.

Sorry should have explained more...

It would search each element with the class .message for instance. Then find all of the words within that class and replace it with link.

There would also be a few hundred within this array

Answer 1

A good strategy is:

1) Build an object whose keys are the phrases to replace and whose values are the links to replace them with.

2) While doing that, construct a regular expression that can match any of the keys, then

3) Use that regex to globally replace.

Rough example:

var replacementDict = {
    'foo': 'http://www.foo.com/',
    'bar': 'http://www.bar.net/'
};
var theRegex = /\b(foo|bar)\b/g;
theText.replace(theRegex, function(s, theWord) {
    return "<a href='" + replacementDict[theWord] + "'>" + theWord + "</a>";
});

Answer 2

Given some content like:

    <div class="message">Somethsg1</div>
    <div class="message">Something</div>
    <div class="message">Ssething</div>
    <div class="message">Something Else</div>
    <div class="message">Something da</div>
    <div class="message">Somethin2g</div>

You can use something like:

//your array
var words = [
    {
        word: 'Something',
        link: 'http://www.something.com'
    },
    {
        word: 'Something Else',
        link: 'http://www.something.com/else'
    }
];
//iterate the array
$.each(words,
    function() {
        //find an element with class "message" that contains "word" (from array)
        $('.message:contains("' + this.word + '")')
             //substitute html with a nice anchor tag
             .html('<a href="' + this.link + '">' + this.link + '</a>');
    }
);

This solution has one immediate problem though (showed in the example too). If you search for example for Something and you find Something beautiful, the "contains" will be match.
If you want a strict selection, you have to do:

//for each array element
$.each(words,
    function() {
        //store it ("this" is gonna become the dom element in the next function)
        var search = this;
        $('.message').each(
            function() {
                //if it's exactly the same
                if ($(this).text() === search.word) {
                    //do your magic tricks
                    $(this).html('<a href="' + search.link + '">' + search.link + '</a>');
                }
            }
        );
    }
);

It's your choice whether to iterate all array elements first then all the doms, or the other way around. It's also depends on which kind of "words" you are gonna search (See the two example for the "why").

BIG WARNING: if the array contains user-defined content, you have to sanitize it before injiecting it to the elements' html!