JavaScript を使用して HTML ページ内検索を実装する方法

JavaScript は HTML ページ内検索を実装します

インターネットの急速な発展に伴い、Web ページの数も増加しています。ユーザーが必要なコンテンツをすばやく見つけやすくするために、一部の Web ページに検索エンジンが追加されています。ただし、一部の単純な Web ページにはそのような機能がありません。この記事では、JavaScriptを使用してHTMLのページ内検索を実装する方法を紹介します。

1. 要件分析

実装する必要がある機能は非常に単純です: HTML ページにキーワードを入力し、検索ボタンをクリックし、キーワードを含むテキストを強調表示します。

2. 実装プロセス

シンプルな HTML ページを例に、ページ内検索機能の実装方法を紹介します。

1. HTML ページ

HTML ページは次のようになります:

nbsp;html>


    <title>JavaScript实现页内搜索</title>


    <h1>这是一个标题</h1>
    <p>这是一段文字，其中包含了<span>重要信息</span>和其他无关信息。</p>
    <p>这是另一段文字，其中也包含了<span>重要信息</span>和其他无关信息。而且有一些<span>重要信息</span>是重复的。</p>
    <p>这是最后一段文字，没有任何<span>重要信息</span>。</p>
    <input>
    <button>搜索</button>

2. JavaScript 実装

us JavaScript検索機能を実装するには、コードをページに追加する必要があります。コードは次のとおりです。

<script>
function searchWord() {
    // 获取搜索框中的关键字
    var keyword = document.getElementById(&#39;keyword&#39;).value;
    // 获取所有的p标签
    var pTags = document.getElementsByTagName(&#39;p&#39;);
    // 遍历所有p标签
    for (var i = 0; i < pTags.length; i++) {
        // 获取当前p标签中的文本内容
        var text = pTags[i].innerText;
        // 判断文本内容中是否包含关键字
        if (text.indexOf(keyword) !== -1) {
            // 如果包含关键字，将关键字高亮显示
            var html = text.replace(new RegExp(keyword, &#39;g&#39;), &#39;<span style="background-color: yellow;">&#39; + keyword + &#39;&#39;);
            pTags[i].innerHTML = html;
        }
    }
}
</script>

まず、検索ボックス内のキーワードを取得し、次にページ内のすべての p タグを取得します。次に、すべての p タグを走査し、各 p タグのテキスト コンテンツを取得し、テキスト コンテンツにキーワードが含まれているかどうかを判断します。キーワードが含まれている場合は、そのキーワードが強調表示されます。最後に、変更したテキストの内容を p タグに戻します。

3. テスト結果

上記のコードを実行し、キーワード「重要」を入力して検索ボタンをクリックすると、キーワード「重要」を含むテキストがページ上で強調表示されます。以下の図に示すように:

[](https://postimg.cc/PNwqW7qQ)

4. パフォーマンスの最適化

検索機能の実装後, パフォーマンスの最適化を行うこともできます。

1. 実行効率の最適化

テキストを検索する場合、indexOf() 関数を使用して文字列にキーワードが含まれているかどうかを判断します。ただし、この関数の実行効率は低くなります。したがって、この関数の代わりに正規表現を使用できます。以下に示すように:

if (text.match(new RegExp(keyword, 'gi'))) {
    // ...
}

2. 可読性の最適化

ボタンの onclick イベントに検索機能を配置しました。このようにして検索機能は実装できますが、コードの可読性は良くありません。検索関数を分離して、フォームの送信イベントにバインドできます。ユーザーが Enter キーを押したときに検索イベントをトリガーすることもできます。コードは次のとおりです:

<script>
function searchWord() {
    // ...
}

document.querySelector(&#39;form&#39;).addEventListener(&#39;submit&#39;, function (event) {
    event.preventDefault();
    searchWord();
});
</script>

5. 概要

この記事では、JavaScript を使用して HTML ページ内検索機能を実装する方法を紹介します。この機能はシンプルですが、ページ上の重要な情報をすばやく見つける必要がある場合に非常に便利です。コードの最適化により、検索効率と可読性を向上させることができます。

以上がJavaScript を使用して HTML ページ内検索を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。