jQueryでテキストの強調表示を実装するにはどうすればよいですか?

jQuery は、HTML ドキュメントの操作とイベント処理を簡素化するために使用される人気のある JavaScript ライブラリです。テキスト ハイライト機能を実装する場合、次の手順で jQuery を使用できます:

1. jQuery ライブラリ ファイルを導入します:
   まず、jQuery ライブラリ ファイルを HTML ファイルに導入する必要があります。 CDN リンクまたはローカル ファイル経由でページに追加できます。次のコード スニペットを タグに追加します:

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

2. HTML 構造の記述:
   入力が必要なテキスト ボックスまたはその他の HTML 要素をページに追加します。強調表示されたテキストの内容。コード例は次のとおりです。

<input type="text" id="searchInput" placeholder="输入需要高亮显示的文本">
<button id="highlightBtn">高亮显示</button>
<div id="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vehicula metus ac odio.
</div>

3. jQuery コードを作成します。
   次に、jQuery を介してコードを作成し、テキストの強調表示機能を実装します。コード例は次のとおりです。

$(document).ready(function() {
    $("#highlightBtn").click(function() {
        var searchString = $("#searchInput").val();
        var content = $("#content").text();
        
        var highlightedContent = content.replace(new RegExp(searchString, 'gi'), function(match) {
            return '<span class="highlighted">' + match + '</span>';
        });
        
        $("#content").html(highlightedContent);
    });
});

上記のコードでは、まず入力ボックス内の検索テキストとコンテンツ領域内のテキストを取得します。次に、JavaScript の replace メソッドと正規表現を組み合わせて使用​​し、一致したテキストに タグを追加して強調表示します。最後に、処理されたコンテンツがコンテンツ領域にリセットされます。

4. CSS スタイル設定:
   ハイライト効果をより良くするには、CSS ファイルでハイライトされたテキストのスタイルを設定する必要があります。コード例は次のとおりです。

.highlighted {
    background-color: yellow;
    font-weight: bold;
}

上記の手順により、ページ上のテキストの強調表示機能を実現できます。ユーザーが強調表示する必要があるテキストを入力した後、ボタンをクリックして、一致するテキストの内容を強調表示します。 jQuery の機能と利便性により、テキストの強調表示を簡単かつ効率的に実装できます。

以上がjQueryでテキストの強調表示を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。