So implementieren Sie eine HTML-In-Page-Suche mit JavaScript

JavaScript implementiert die HTML-In-Page-Suche

Mit der rasanten Entwicklung des Internets wächst auch die Anzahl der Webseiten. Um Benutzern das schnelle Auffinden der benötigten Inhalte zu erleichtern, wurden einigen Webseiten Suchmaschinen hinzugefügt. Einige einfache Webseiten verfügen jedoch nicht über diese Funktionalität. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript die HTML-In-Page-Suche implementieren.

1. Anforderungsanalyse

Die Funktion, die wir implementieren müssen, ist sehr einfach: Geben Sie Schlüsselwörter in eine HTML-Seite ein, klicken Sie auf die Suchschaltfläche und markieren Sie den Text, der die Schlüsselwörter enthält.

2. Implementierungsprozess

Nachfolgend nehmen wir eine einfache HTML-Seite als Beispiel, um die Implementierung der On-Page-Suchfunktion vorzustellen.

1. HTML-Seite

Unsere HTML-Seite sieht so aus:

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-Implementierung

Wir müssen der Seite JavaScript-Code hinzufügen, um die Suchfunktion zu implementieren. Der Code lautet wie folgt:

<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>

Wir erhalten zuerst die Schlüsselwörter im Suchfeld und dann alle p-Tags auf der Seite. Als nächstes durchlaufen wir alle p-Tags, ermitteln den Textinhalt in jedem p-Tag und bestimmen, ob der Textinhalt Schlüsselwörter enthält. Wenn ein Schlüsselwort enthalten ist, heben wir das Schlüsselwort hervor. Fügen Sie abschließend den geänderten Textinhalt wieder in das p-Tag ein.

3. Testergebnisse

Wir führen den obigen Code aus und geben das Schlüsselwort „Wichtig“ ein. Nachdem Sie auf die Suchschaltfläche geklickt haben, wird der Text mit dem Schlüsselwort „Wichtig“ auf der Seite hervorgehoben. Wie in der Abbildung unten gezeigt:

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

4. Leistungsoptimierung

Nach der Implementierung der Suchfunktion können wir auch einige Leistungsoptimierungen durchführen.

1. Optimierung der Ausführungseffizienz

Bei der Suche nach Text verwenden wir die Funktion indexOf(), um zu bestimmen, ob die Zeichenfolge Schlüsselwörter enthält. Allerdings ist diese Funktion weniger effizient. Daher können wir anstelle dieser Funktion reguläre Ausdrücke verwenden. Wie unten gezeigt:

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

2. Lesbarkeitsoptimierung

Wir haben die Suchfunktion in das Onclick-Ereignis der Schaltfläche eingefügt. Obwohl die Suchfunktion auf diese Weise implementiert werden kann, ist die Lesbarkeit des Codes nicht gut. Wir können die Suchfunktion trennen und an das Submit-Ereignis des Formulars binden. Das Suchereignis kann auch ausgelöst werden, wenn der Benutzer die Eingabetaste drückt. Der Code lautet wie folgt:

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

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

5. Zusammenfassung

In diesem Artikel wird erläutert, wie Sie JavaScript verwenden, um die HTML-In-Page-Suchfunktion zu implementieren. Obwohl diese Funktion einfach ist, ist sie sehr nützlich, wenn Sie wichtige Informationen auf einer Seite schnell finden müssen. Wir können die Sucheffizienz und Lesbarkeit durch Codeoptimierung verbessern.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine HTML-In-Page-Suche mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!