2

検索結果のページがあります。結果のリストが与えられたら、入力から特定のテキスト文字列を強調表示できる必要があります。次のコードを使用すると、用語を強調表示できますが、結果のリストを使用して強調表示しようとしています。意図した結果は、返された結果のリストで検索文字列のすべてのインスタンスを強調表示することです。

HTML

<input type="text" id="searchfor" />
<p id="all_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>

CSS

#all_text span {
    text-decoration:underline;
    background-color:yellow;
}

JavaScript

$('#searchfor').keyup(function () {

    var page = $('#all_text');
    var pageText = page.text().replace("<span>", "");
    var searchedText = $('#searchfor').val();
    var theRegEx = new RegExp("(" + searchedText + ")", "igm");
    var newHtml = pageText.replace(theRegEx, "<span>$1</span>");
    page.html(newHtml);
});
4

1 に答える 1