我在jquery中使用带replace
的正则表达式查找定义中的所有单词,并用链接到该单词页面的自定义链接替换它们。我遇到的问题是,在我的一些定义中,定义中有一个<a>
链接。
示例正确输入
This is a definition of a word in my database <a href="http://www.example.com">[source]</a>.
示例正确输出
This is a <a href="/dictionary/word/definition">definition</a> of a <a href="/dictionary/word/word">word</a> in my <a href="/dictionary/word/database">database</a> <a href="http://www.example.com">[source]</a>.
我使用一系列停用词,因此它不会将自定义链接应用于
这类词var stopwords = ["a", "about", "above", "across", "after",...
问题是,当我检查页面的HTML时,它会更改定义中该链接的href
。
This is a <a href="/dictionary/word/definition">definition</a> of a <a href="/dictionary/word/word">word</a> in my <a href="/dictionary/word/database">database</a> <a href="/dictionary/word/source">[source]</a>.
它正在将http://www.example.com
更改为/dictionary/word/souce
,我不希望它这样做。有什么办法可以保留这个[来源]链接,但是对所有其他单词一样正常吗?
$('.definition').html(function() {
return $(this).text().replace(/\b[\w-]+\b/g, function(m){
if ($.inArray(m.toLowerCase(), stopwords) === -1) {
return ' <a href="/dictionary/word/' + m.toLowerCase() + '/">' + m + '</a>';
} else {
return " "+m;
}
});
})
答案 0 :(得分:0)
使用only-regex解决方案可能不适合处理dom字符串,而是可以执行类似于仅替换目标元素内的文本节点的内容
var stopwords = ['this', 'is', 'a', 'of', 'in', 'my', '', '[source]', '', '', '', '', '', ''];
$('.definition').contents().each(function process() {
//console.log(this, this.nodeType);
if (this.nodeType == Node.TEXT_NODE) {
var content = $(this).text().replace(/\b[\w-]+\b/g, function(m) {
if ($.inArray(m.toLowerCase(), stopwords) === -1) {
return ' <a href="/dictionary/word/' + m.toLowerCase() + '/">' + m + '</a>';
} else {
return " " + m;
}
});
$(this).replaceWith(content);
}
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="definition">
This is a definition of a word in my database <a href="http://www.example.com">[source]</a>.
</div>
&#13;