<div class="codetitle"> <span><a style="CURSOR: pointer" data="87810" class="copybut" id="copybut87810" onclick="doCopy('code87810')"><u>コードをコピー</u></a></span> コードは次のとおりです:</div> <div class="codebody" id="code87810"> <br><!DOCTYPE HTML PUBLIC "-//W3C/ /DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br><html xmlns="http://www.w3 .org/ 1999/xhtml"> <br><head> <br><meta http-equiv="Content-Type" content="text/html" /> <br> <title> ;JS キーワードの強調表示</title> <br><script type="text/javascript"> <br>/* <br>* パラメータの説明: <br>* obj: 強調表示されるオブジェクトhtml タグ ノード。<br>* hlWords: 強調表示する文字列、複数の単語を区切るには垂直バー (|) またはスペースを使用します。<br>* bgColor: 背景色、デフォルトは赤です。 🎜>function MarkHighLight(obj, hlWords, bgColor) { <br>hlWords = AnalyzeHighLightWords(hlWords); <br>if (obj == null || hlWords.length == 0) <br>return <br>if ( bgColor == null || bgColor == "") { <br>bgColor = "red" >} <br>MarkHighLightCore(obj, hlWords); //マークのコアメソッド <br> 関数を実行します。 MarkHighLightCore(obj, keyWords) { <br>var re = new RegExp(keyWords, "i"); <br>var style = ' style="background-color:' bgColor ';" <br>for (var i = 0; obj.childNodes.length; i ) { <br>var childObj = obj.childNodes[i]; <br>if (childObj.data. search(re) == -1) 続行; <br>var reResult = new RegExp("(" keyWords ")", "gi"); <br>var objResult = document.createElement ("span"); >objResult.innerHTML = childObj.data.replace(reResult, "<span" style ">$1</span>"); <br>if (childObj.data == objResult .childNodes[0].innerHTML)続行; <br>obj.replaceChild(objResult, childObj); <br>} else if (childObj.nodeType == 1) { <br>MarkHighLightCore(childObj, keyWords); } <br>//キーワードを分析します<br>function AnalyzeHighLightWords(hlWords) { <br>if (hlWords == null) return ""; <br>hlWords = hlWords.replace(/ s /g, "|")。 replace(/| /g, "|"); <br>hlWords = hlWords.replace(/(^|*)|(|*$)/g, ""); 0) return ""; <br>var WordsArr = hlWords.split("|"); <br>if (wordsArr.length > 1) { <br>var resultArr = BubbleSort (wordsArr); = ""; <br>for (var i = 0; i < resultArr.length; i ) { <BR>result = result "|" resultArr[i]; <BR>return result.replace( /(^|*)|(|*$)/g, ""); <BR>} else { <BR>return hlWords>} <BR>} <BR>// バブルソートメソッドを使用して前に長いキーワード <BR>function BubbleSort(arr) { <BR>var temp,exchange; <BR>for (var i = 0; i <arr.length; i ) { <BR>exchange = false; >for (var j = arr.length - 2; j >= i; j--) { <BR>if ((arr[j 1].length) > (arr[j]).length) { <BR>temp = arr[j 1]; arr[j 1] = arr[j] = temp; <BR>} <BR>} <BR>if (! ) ブレーク; <BR>} <BR>return arr; <BR>} <BR>} <BR>//end <BR>function search() { <BR>var obj = document.getElementById("waiDiv"); <BR>var keyWord = document.getElementById("keyWord"); <BR>MarkHighLight(obj, keyWord.value, "Orange"); <BR>< ;/script>> ; <br><本文> <br><div id="keyWord" > <br><input type="ボタン" value="Search" onclick="search()" /><br /> <br><br /> <br><div id= "contentDiv"> <br>2 番目-レートの友人はゲーム中に1,200元を騙し取られたが、警察に電話したところ、2,000元が足りない場合は告訴できないと言われた。有力な中古人はその口座にさらに800元を送金した。嘘つきは幸せだと思いますか？それでもとても幸せです。 <br></div> <br></body><br><br> <br>改良版<br><br> 🎜><br><br>コードをコピー<br><br><br> コードは次のとおりです:<br><div class="codebody" id="code79524"> <br>function highlightWord(node, word) { <br>// このノードを反復処理します childNodes <br>if (node.hasChildNodes) { <br>var hi_cn; <br>for (hi_cn = 0; hi_cn <node.childnodes.length hi_cn>highlightWord(node.childNodes[hi_cn], word); <br>} <br>} <br>// このノード自体を実行します <br>if (node.nodeType == 3) { // テキスト ノード <br>tempNodeVal = node.nodeValue.toLowerCase(); <br>tempWordVal = word.toLowerCase(); <br>if (tempNodeVal.indexOf(tempWordVal) != -1) { <br>pn = node.parentNode; <br>if (pn.className != "highlight") { <br>// 単語はまだハイライトされていません! <br>nv = ノード.ノード値; <br>ni = tempNodeVal.indexOf(tempWordVal); <br>// 置換ノードのロードを作成します <br>before = document.createTextNode(nv.substr(0, ni)); <br>docWordVal = nv.substr(ni, word.length); <br>after = document.createTextNode(nv.substr(ni word.length)); <br>hiwordtext = document.createTextNode(docWordVal); <br>hiword = document.createElement("span"); <br>hiword.className = "ハイライト"; <br>hiword.appendChild(hiwordtext); <br>pn.insertBefore(前、ノード); <br>pn.insertBefore(hiword, ノード); <br>pn.insertBefore(after, ノード); <br>pn.removeChild(ノード); <br>} <br>} <br>} <br>} <br>//根据Tag名高亮关键字 <br>function SearchHighlightTag(node, key) { <br>if (!document.createElement) return ; <br>if (key.length === 0) は false を返します。 <br>var array = new Array(); <br>配列 = key.split(" "); <br>var 要素 = document.getElementsByTagName(node); <br>for (var i = 0; i <array.length i>for (var j = 0; j highlightWord(element[j],配列[i]); <br>} <br>} <br>} <br>//根据ID高亮关键字 <br>function SearchHighlightID(node, key) { <br>if (!document.createElement) return; <br>if (key.length === 0) は false を返します。 <br>var array = new Array(); <br>配列 = key.split(" "); <br>var 要素 = document.getElementById(node); <br>for (var i = 0; i <array.length i>for (var j = 0; j highlightWord(element, array[i ]); <br>} <br>} <br>} <br></array.length></array.length></node.childnodes.length> </div> </div>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
