Word search, link replacement

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 him to look for the page for the word and replace it with a link. Is there an effective way to do this? It seems like it might be a hungry processor.

Sorry, you needed more ...

It will search for every element with a .message class, for example. Then find all the words inside it.

There will also be several hundred in this array

Answer 1

Good strategy:

1) Create an object whose keys are replaceable phrases and whose values ​​are links to replace them.

2) In doing so, create a regular expression that can match any of the keys, then

3) Use this regular expression for global replacement.

:

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

, :

    <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>

- :

//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>');
    }
);

( ). -, - , "contains" .
, :

//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 exactly the same
                if ($(this).text() === search.word) {
                    //do your magic tricks
                    $(this).html('<a href="' + search.link + '">' + search.link + '</a>');
                }
            }
        );
    }
);

, , , . , "" (. "" ).

: , , html !

Answer 3

- :

$('*:contains("string to find")');

, "*" , , HTML, BODY .., node , node...

, - , ( , ), .

Answer 4

If you want to wrap the comment code "a" and leave a comment above. Try the following:

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

var changeWordsWithLink = function (words) {
if(document.getElementById && document.getElementsByTagName) {
    var messages = document.getElementById('message');

    if(messages) {
        for(i = 0; i < messages.length; i++){
            for (j = 0; j < words.length; j++) {
                if(words[j].word == messages[i].innerHTML) {
                    messages[i].innerHTML = words[j].link;
                    //messages[i].innerHTML = wrapInATag(words[j].link, words[j].word);
                }
            }
        }
    }
}
}

var wrapInATag = function(link, word) {
   return '<a href="' + link + '">' + word + '</a>';
}