Question

我正在尝试为我的网站创建文本突出显示选项。但我想要精确的单词匹配而不是模糊的单词匹配，我所拥有的代码匹配所有类型的实例，它有一些区分大小写的问题。如果我们采用Jfiddle示例，我只想添加癌症这个词，区分大小写应该是一个问题。并忽略模糊匹配，如癌症和bycanceraous（我知道没有像这样的词，但在这个例子中没有想到任何一个）。我有jfiddle链接 http://jsfiddle.net/ehzPQ/6/

HTML：

<div id="entity">cancer</div>
<div id="article">
  This kind of insurance is meant to supplement health insurance for cancerous-care costs. But generally you're better off putting your money toward comprehensive health policies. The I just repeat health insurance, because it sounds so good! health insurance, health insurance, I can never grow tired of it... Cancer is seriously a dangerouse disease. Test case : bycanceraous
</div>

CSS：

.highlight {
    background-color: yellow
}

使用Javascript：

$(document).ready(function(){
  var $test = $('#article');
  var entityText = $('#entity').html();
  var entityRegularExpression = new RegExp(entityText,"g");
  var highlight = '<span class="highlight">' + entityText + '</span>';
  $test.html($test.html().replace(entityRegularExpression, highlight));
});

Answer 1

您需要使用正则表达式Word Boundaries。

更改以下行：

var entityRegularExpression = new RegExp(entityText, "g");

对此：

var entityRegularExpression = new RegExp("\\b" + entityText + "\\b", "gi");

Here's the updated jsfiddle.
注意：我更新了文章文本以包含该单词的一些实例，以便您可以看到它的工作原理。

通过使用正则表达式Callbacks，您还可以更进一步，让不区分大小写的匹配保留其原始大小写。查看this jsfiddle代码和示例。

忽略模糊匹配并使用javascript添加精确的单词模式匹配

1 个答案: