Maison > Article > interface Web > Code JS pour implémenter la recherche et la mise en évidence de pages statiques

Code JS pour implémenter la recherche et la mise en évidence de pages statiques

小云云original: 2018-02-05 15:50:072070parcourir

Cet article présente principalement JS pour implémenter des fonctions de recherche et de mise en évidence de pages statiques, impliquant une réponse aux événements javascript, le remplacement de la traversée de caractères et la transformation dynamique des attributs des éléments de page et d'autres techniques d'exploitation connexes. J'espère que les amis qui en ont besoin pourront s'y référer. peut aider tout le monde.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS搜索</title>
</head>
<body>
<input id="key-word" class="key-word" value="请输入搜索内容" />
<button id="search-button">搜索</button>
<p id="content" >
<p>这是主体内容，有很多内容，很多很多啊啊啊……，比如1234abcd啊啊啊啊</p>
<p>这是主体内容，有很多内容，很多很多啊啊啊……，比如1234abcd啊啊啊啊</p>
<p>这是主体内容，有很多内容，很多很多啊啊啊……，比如1234abcd啊啊啊啊</p>
<p>这是主体内容，有很多内容，很多很多啊啊啊……，比如1234abcd啊啊< d d>啊啊</p>
</p>
<script>
function $(id){
return document.getElementById(id)
}
var putWordsObj = $(&#39;key-word&#39;);
putWordsObj.onfocus = function(){
if(this.value == &#39;请输入搜索内容&#39;)this.value=&#39;&#39;;
}
putWordsObj.onblur = function(){
if(!this.value)this.value=&#39;请输入搜索内容&#39;;
}
//search
$(&#39;search-button&#39;).onclick = function(){
var content = $(&#39;content&#39;).innerHTML;
var keyWord = $(&#39;key-word&#39;).value;
content = search_do(content, keyWord);
$(&#39;content&#39;).innerHTML = content;
//alert(content)
}
function search_do(content,keyWord){
var keyWordArr = keyWord.replace(/[\s]+/g,&#39; &#39;).split(&#39; &#39;);
var re;
for(var n = 0; n < keyWordArr.length; n ++) {
//re = new RegExp(">[\s\S]*?"+keyWordArr[n]+"[\s\S]*?<\S","gmi");
re = new RegExp(""+keyWordArr[n]+"","gmi");
content = content.replace(re,&#39;<span style="color:#0f0;background-color:#ff0">&#39;+keyWordArr[n]+&#39;</span>&#39;);
}
return content;
}
</script>
</body>
</html>

L'effet de l'opération est le suivant :

Recommandations associées :

JavaScript Exemples de fonctions de recherche et de surbrillance implémentées

Explication détaillée de la façon d'utiliser le plug-in de surbrillance jQuery Json json-viewer.js

Implémentation du remplacement JavaScript Comment mettre en évidence les mots-clés de recherche

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Sélecteur d'élément de formulaire jQuery et obtention d'une instance de sélecteur d'élément de sélectionArticle suivant：Sélecteur d'élément de formulaire jQuery et obtention d'une instance de sélecteur d'élément de sélection

Articles Liés

Voir plus