suchen

Heim >Web-Frontend >js-Tutorial >JS-Code zur Implementierung der statischen Seitensuche und -hervorhebung

JS-Code zur Implementierung der statischen Seitensuche und -hervorhebung

小云云
小云云Original
2018-02-05 15:50:072121Durchsuche

In diesem Artikel wird hauptsächlich die Implementierung statischer Seitensuch- und Hervorhebungsfunktionen vorgestellt, einschließlich JavaScript-Ereignisreaktion, Zeichendurchlaufersetzung und dynamischer Transformation von Seitenelementattributen. Freunde, die dies benötigen, können darauf verweisen kann jedem helfen. 


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

Der Betriebseffekt ist wie folgt:

Verwandte Empfehlungen:

JavaScript-Beispiele für implementierte Such- und Hervorhebungsfunktionen

Detaillierte Erläuterung der Verwendung des jQuery Json Hervorhebungs-Plug-ins json-viewer.js

JavaScript-Ersetzungsimplementierung So markieren Sie Suchbegriffe


Das obige ist der detaillierte Inhalt vonJS-Code zur Implementierung der statischen Seitensuche und -hervorhebung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jQuery-Formularelementselektor und Abrufen der Instanz des ausgewählten ElementselektorsNächster Artikel：jQuery-Formularelementselektor und Abrufen der Instanz des ausgewählten Elementselektors

In Verbindung stehende Artikel

Mehr sehen