Javascript 搜索单词，替换为链接

我有一个这样的数组

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

我希望它在页面中搜索单词，并用链接替换它。有没有一种有效的方法？看起来它可能需要CPU

对不起，我应该多解释一些

例如，它将使用class.message搜索每个元素。然后找出其中的所有单词

---

在这个数组中也会有几百个

可以通过以下方式来实现：

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

这种方法的问题是“*”将返回包含字符串的所有元素，包括HTML、BODY等。。。在这之后，您仍然需要在每个元素的文本节点中找到字符串，因此只需检查每个文本节点就可以更容易了

我建议您看看已经做了与您想要的非常相似的事情（而不是链接，它突出显示页面上的任何文本），但从外观上看，似乎很容易更改它。

一个好的策略是：

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

var replacementDict={
“foo”：http://www.foo.com/',
“酒吧”：http://www.bar.net/'
};
var theRegex=/\b（foo | bar）\b/g；
替换（theRegex，function，the word）{
返回“”；
});

给出一些内容，如：

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

Somethsg1
某物
塞西
别的
某物
某物2g

您可以使用以下内容：

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

//您的数组
变量字=[
{
单词：“某物”，
链接：'http://www.something.com'
},
{
单词：“其他东西”，
链接：'http://www.something.com/else'
}
];
//迭代数组
$。每个（字，
函数（）{
//查找类为“message”且包含“word”的元素（来自数组）
$（'.message:包含（“+this.word+”））
//用一个好的锚标记替换html
.html（“”）；
}
);

这个解决方案有一个直接的问题（示例中也显示了）。例如，如果您搜索某物，发现某物漂亮，则“包含”将匹配。
如果您想要严格选择，您必须执行以下操作：

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

//对于每个数组元素
$。每个（字，
函数（）{
//存储它（“this”将成为下一个函数中的dom元素）
var搜索=此；
$（'.message'）。每个(
函数（）{
//如果完全一样的话
if（$（this.text（）==search.word）{
//做你的魔术
$（this.html（“”）；
}
}
);
}
);

您可以选择是先迭代所有数组元素，然后迭代所有DOM，还是反过来迭代。这还取决于您要搜索哪种“单词”（参见两个示例中的“为什么”）

---

大警告：如果数组包含用户定义的内容，则必须在将其输入元素的html之前对其进行清理

如果您想在上面的注释代码和注释调用中加上“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>';
}

var单词=[
{
单词：“某物”，
链接：'http://www.something.com'
},
{
单词：“其他东西”，
链接：'http://www.something.com/else'
}];
var changeWordsWithLink=函数（字）{
if（document.getElementById&&document.getElementsByTagName）{
var messages=document.getElementById（'message'）；
如果（信息）{
对于（i=0；i

我建议将其移动到serverside.Um。。CPU饥饿？简单文本替换？而且，您需要提供更多关于该页面的背景信息，包括您正在处理的元素、结构。。“通常是这样的。”丽拉努娜：不幸的是，不能@meder：添加了更多信息。唯一可靠的方法是遍历目标节点中的所有文本节点，然后从那里替换。你想要实际的标记吗谢谢，正是我要找的。