忽略jquery中的字符串用单词边界

时间:2017-02-02 03:17:13

标签: jquery regex

我在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;
        }
    });
})

1 个答案:

答案 0 :(得分:0)

使用only-regex解决方案可能不适合处理dom字符串,而是可以执行类似于仅替换目标元素内的文本节点的内容

&#13;
&#13;
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;
&#13;
&#13;