搜索單詞，替換為鏈接

Question

我有這樣的數組

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

我希望它在頁面上搜索單詞並用鏈接替換它。 這樣做有效嗎？ 似乎可能是CPU飢餓。

對不起本來應該更多...

例如，它將使用類.message搜索每個元素。 然后找到其中的所有單詞。

這個陣列中也會有幾百個

Answer 1

一個好的策略是：

1）構建一個對象，其對象是要替換的短語，其值是用它們替換的鏈接。

2）在執行此操作時，構造一個可以匹配任何鍵的正則表達式

3）使用該正則表達式進行全局替換。

粗略的例子：

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

這個解決方案有一個直接的問題（在例子中也顯示）。 如果您搜索Something的示例，並且您發現Something beautiful ，則“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's exactly the same
                if ($(this).text() === search.word) {
                    //do your magic tricks
                    $(this).html('<a href="' + search.link + '">' + search.link + '</a>');
                }
            }
        );
    }
);

您可以選擇是先迭代所有數組元素然后再遍歷所有dom，還是反過來。 這也取決於你要搜索哪種“單詞”（參見兩個例子中的“為什么”）。

BIG WARNING：如果數組包含用戶定義的內容，則必須先對其進行清理，然后才能將其置於元素的html中！

Answer 3

有可能做到這樣的事情：

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

這種方法的問題是“*”將返回包含字符串的所有元素，包括HTML，BODY等......之后你仍然需要在每個元素的文本節點內找到字符串，所以它可能是更容易去檢查每個文本節點...

我建議你看一下高亮插件已經做了一些非常類似於你想要的東西（而不是鏈接，它突出顯示頁面上的任何文字），但從源代碼看起來很容易改變它。

Answer 4

如果你想在'a'標簽中包含取消注釋代碼並在上面注釋評論。 嘗試這個：

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