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等......之后你仍然需要在每个元素的文本节点中找到字符串，所以可能更容易去检查每个文本节点...

我建议您查看highlight plugin已经做了与您想要的非常相似的事情（而不是链接，它突出显示页面上的任何文字），但是来自source code改变它似乎很容易。

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

搜索单词，替换为链接

4 个答案: