1

テキストボックスにJQueryUIのオートコンプリートフィルを使用しています。この文字列には、検索を実行して検索結果を返す複数の単語を含めることができます。これらの複数の用語にまたがるオートコンプリート結果の取得についてはすでに書き終えており、結果の単語を太字にするのに助けが必要です。

たとえば、「dog i」と入力すると、次の結果が得られます (i の不適切なスペースは無視してください)。ここで、3 つのキーワードは太字で示されています。

「私は茶色の犬です。」

「茶色の 犬は 私の友人です。」

一般的な解決策は、 String.replace と、結果のキーワードに追加の HTML ラッパーを追加する正規表現を使用しているようです。ただし、問題は、複数のキーワードがあるため、新しく追加された HTML のコンテンツをラップする状況に遭遇する可能性があることです。上記の例を続けると、"i" により、dog の "weight" の "i" がラップされます。

     "The brown <span style='font-we<span style='font-weight:bold'>i</span>ght:bold'>dog</span>  <span style='font-weight:bold'>i</span>s my fr<span style='font-weight:bold'>i</span>end."

HTML が HTML によって再ラップされないようにするにはどうすればよいですか? ありがとう。

これが私のコードです：

    var regex;
    for (var i = 0; i < item.keywords.length; i++) {
        regex = new RegExp(item.keywords[i], "i");
        display = display.replace(regex, "<span style='font-weight:bold'>" +
            item.keywords[i] + "</span>");
    }
4

1 に答える 1

1 
var keywords = "dog i";
var text = "The brown dog i s my fr i end.";

var expression = $.map([keywords].concat(keywords.split(" ")), function(el) { 
  return "(?:" + el + ")";
}).join('|');

var regexp = new RegExp('(' + expression + ')', 'ig');
var filteredText = text.replace(regexp, '<span style="font-weight:bold">$1</span>');

デモ。

于 2012-08-21T18:43:13.500 に答える