Comment implémenter la recherche HTML dans la page avec JavaScript

JavaScript implémente la recherche HTML dans la page

Avec le développement rapide d'Internet, le nombre de pages Web augmente également. Afin de permettre aux utilisateurs de trouver rapidement le contenu dont ils ont besoin, des moteurs de recherche ont été ajoutés à certaines pages Web. Cependant, certaines pages Web simples ne disposent pas de cette fonctionnalité. Cet article explique comment utiliser JavaScript pour implémenter la recherche HTML dans la page.

1. Analyse des exigences

La fonction que nous devons implémenter est très simple : saisissez des mots-clés dans une page html, cliquez sur le bouton de recherche et mettez en surbrillance le texte contenant les mots-clés.

2. Processus de mise en œuvre

Prenons une simple page HTML comme exemple pour présenter comment implémenter la fonction de recherche sur la page.

1. Page HTML

Notre page html ressemble à ceci :

nbsp;html>


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


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

2. Implémentation de JavaScript

Nous devons ajouter du code JavaScript à la page pour implémenter la fonction de recherche. Le code est le suivant :

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

Nous obtenons d'abord les mots-clés dans le champ de recherche, puis toutes les balises p de la page. Ensuite, nous parcourons toutes les balises p, obtenons le contenu du texte dans chaque balise p et déterminons si le contenu du texte contient des mots-clés. Si un mot-clé est inclus, nous le mettons en surbrillance. Enfin, remettez le contenu du texte modifié dans la balise p.

3. Résultats des tests

Nous exécutons le code ci-dessus et saisissons le mot-clé « Important ». Après avoir cliqué sur le bouton de recherche, le texte contenant le mot-clé « Important » sera mis en surbrillance sur la page. Comme le montre la figure ci-dessous :

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

4. Optimisation des performances

Après avoir implémenté la fonction de recherche, nous pouvons également effectuer une optimisation des performances.

1. Optimisation de l'efficacité d'exécution

Lors de la recherche de texte, nous utilisons la fonction indexOf() pour déterminer si la chaîne contient des mots-clés. Cependant, cette fonction est moins efficace. Par conséquent, nous pouvons utiliser des expressions régulières à la place de cette fonction. Comme indiqué ci-dessous :

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

2. Optimisation de la lisibilité

Nous mettons la fonction de recherche dans l'événement onclick du bouton. Bien que la fonction de recherche puisse être implémentée de cette manière, la lisibilité du code n'est pas bonne. Nous pouvons séparer la fonction de recherche et la lier à l'événement submit du formulaire. L'événement de recherche peut également être déclenché lorsque l'utilisateur appuie sur la touche Entrée. Le code est le suivant :

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

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

5. Résumé

Cet article présente comment utiliser JavaScript pour implémenter la fonction de recherche HTML dans la page. Bien que cette fonctionnalité soit simple, elle s’avère très utile lorsque vous avez besoin de retrouver rapidement des informations clés sur une page. Nous pouvons améliorer l’efficacité et la lisibilité de la recherche grâce à l’optimisation du code.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!