jsキーワードハイライト（ID/タグによるキーワードハイライト）事例紹介_javascriptスキル

コードをコピー コードは次のとおりです: /* * パラメータの説明: * obj: 強調表示されるオブジェクトhtml タグ ノード。 * hlWords: 強調表示する文字列、複数の単語を区切るには垂直バー (|) またはスペースを使用します。 * bgColor: 背景色、デフォルトは赤です。 🎜>function MarkHighLight(obj, hlWords, bgColor) { hlWords = AnalyzeHighLightWords(hlWords); if (obj == null || hlWords.length == 0) return if ( bgColor == null || bgColor == "") { bgColor = "red" >} MarkHighLightCore(obj, hlWords); //マークのコアメソッド 関数を実行します。 MarkHighLightCore(obj, keyWords) { var re = new RegExp(keyWords, "i"); var style = ' style="background-color:' bgColor ';" for (var i = 0; obj.childNodes.length; i ) { var childObj = obj.childNodes[i]; if (childObj.data. search(re) == -1) 続行; var reResult = new RegExp("(" keyWords ")", "gi"); var objResult = document.createElement ("span"); >objResult.innerHTML = childObj.data.replace(reResult, " $1 "); if (childObj.data == objResult .childNodes[0].innerHTML)続行; obj.replaceChild(objResult, childObj); } else if (childObj.nodeType == 1) { MarkHighLightCore(childObj, keyWords); } //キーワードを分析します function AnalyzeHighLightWords(hlWords) { if (hlWords == null) return ""; hlWords = hlWords.replace(/ s /g, "|")。 replace(/| /g, "|"); hlWords = hlWords.replace(/(^|*)|(|*$)/g, ""); 0) return ""; var WordsArr = hlWords.split("|"); if (wordsArr.length > 1) { var resultArr = BubbleSort (wordsArr); = ""; for (var i = 0; i result = result "|" resultArr[i]; return result.replace( /(^|*)|(|*$)/g, ""); } else { return hlWords>} } // バブルソートメソッドを使用して前に長いキーワード function BubbleSort(arr) { var temp,exchange; for (var i = 0; i exchange = false; >for (var j = arr.length - 2; j >= i; j--) { if ((arr[j 1].length) > (arr[j]).length) { temp = arr[j 1]; arr[j 1] = arr[j] = temp; } } if (! ) ブレーク; } return arr; } } //end function search() { var obj = document.getElementById("waiDiv"); var keyWord = document.getElementById("keyWord"); MarkHighLight(obj, keyWord.value, "Orange"); &lt ;/script&gt> ; 2 番目-レートの友人はゲーム中に1,200元を騙し取られたが、警察に電話したところ、2,000元が足りない場合は告訴できないと言われた。有力な中古人はその口座にさらに800元を送金した。嘘つきは幸せだと思いますか？それでもとても幸せです。 改良版 🎜> コードをコピー コードは次のとおりです: function highlightWord(node, word) { // このノードを反復処理します childNodes if (node.hasChildNodes) { var hi_cn; for (hi_cn = 0; hi_cn highlightWord(node.childNodes[hi_cn], word); } } // このノード自体を実行します if (node.nodeType == 3) { // テキスト ノード tempNodeVal = node.nodeValue.toLowerCase(); tempWordVal = word.toLowerCase(); if (tempNodeVal.indexOf(tempWordVal) != -1) { pn = node.parentNode; if (pn.className != "highlight") { // 単語はまだハイライトされていません! nv = ノード.ノード値; ni = tempNodeVal.indexOf(tempWordVal); // 置換ノードのロードを作成します before = document.createTextNode(nv.substr(0, ni)); docWordVal = nv.substr(ni, word.length); after = document.createTextNode(nv.substr(ni word.length)); hiwordtext = document.createTextNode(docWordVal); hiword = document.createElement("span"); hiword.className = "ハイライト"; hiword.appendChild(hiwordtext); pn.insertBefore(前、ノード); pn.insertBefore(hiword, ノード); pn.insertBefore(after, ノード); pn.removeChild(ノード); } } } } //根据Tag名高亮关键字 function SearchHighlightTag(node, key) { if (!document.createElement) return ; if (key.length === 0) は false を返します。 var array = new Array(); 配列 = key.split(" "); var 要素 = document.getElementsByTagName(node); for (var i = 0; i for (var j = 0; j highlightWord(element[j],配列[i]); } } } //根据ID高亮关键字 function SearchHighlightID(node, key) { if (!document.createElement) return; if (key.length === 0) は false を返します。 var array = new Array(); 配列 = key.split(" "); var 要素 = document.getElementById(node); for (var i = 0; i for (var j = 0; j highlightWord(element, array[i ]); } } }