suchen

Heim  >  Artikel  >  Web-Frontend  >  JS implementiert die statische Seitensuche und -hervorhebung

JS implementiert die statische Seitensuche und -hervorhebung

巴扎黑
巴扎黑Original
2017-09-20 09:18:451787Durchsuche

In diesem Artikel wird hauptsächlich JS zur Implementierung statischer Seitensuch- und Hervorhebungsfunktionen vorgestellt, einschließlich JavaScript-Ereignisreaktion, Zeichendurchlaufersetzung und dynamischer Transformation von Seitenelementattributen sowie anderer verwandter Betriebstechniken

Das Beispiel in diesem Artikel beschreibt die JS-Implementierung statischer Seitensuch- und Hervorhebungsfunktionen. Teilen Sie es allen als Referenz mit. Die Einzelheiten lauten wie folgt: 


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

Das obige ist der detaillierte Inhalt vonJS implementiert die statische 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：Detaillierte Erläuterung der async+await-Synchronisations-/asynchronen Lösung von ES6Nächster Artikel：Detaillierte Erläuterung der async+await-Synchronisations-/asynchronen Lösung von ES6

In Verbindung stehende Artikel

Mehr sehen