3

Webサイトのテキストハイライトオプションを作成しようとしています。しかし、あいまいな単語の一致ではなく、完全な単語の一致が必要です。私が持っているコードはすべての種類のインスタンスに一致し、大文字と小文字の区別に問題があります。Jfiddleの例をとると、癌という単語を追加したいだけです。大文字と小文字の区別は問題になりません。そして、cancerousや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));
});
4

1 に答える 1

2

正規表現の単語境界を利用する必要があります。

次の行を変更します。

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

これに：

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

これが更新されたjsfiddleです。
注：記事のテキストを更新して、単語のインスタンスがいくつか含まれるようにしました。これにより、機能することがわかります。

また、正規表現のコールバックを利用して、さらに一歩進んで、大文字と小文字を区別しない一致で元の大文字と小文字を保持させることもできます。コードと例については、このjsfiddleを確認してください。

于 2012-06-13T06:27:23.617 に答える