一个将指定html标签内特定关键词高亮显示的javascript 函数。
/* ----------------------------------------*\
* 使用 js 标记高亮关键词 by markcxz(markcxz@aol.com)
* 参数说明:
* obj: 对象, 要进行高亮显示的html标签节点.
* hlWords: 字符串, 要进行高亮的关键词词, 使用 竖杠(|)或空格 分隔多个词 .
* cssClass: 字符串, 定义关键词突出显示风格的css伪类.
* 参考资料: javascript HTML DOM 高亮显示页面特定字词 By shawl.qiu
\*---------------------------------------- */
function MarkHighLight(obj,hlWords,cssClass){
hlWords = AnalyzeHighLightWords(hlWords);
if (obj == null || hlWords.length == 0 )
return ;
if (cssClass == null )
cssClass = " highlight " ;
MarkHighLightCore(obj,hlWords);
// ------------执行高亮标记的核心方法----------------------------
function MarkHighLightCore(obj,keyWords){
var re = new RegExp(keyWords, " i " );
for ( var i = 0 ; i < obj.childNodes.length; i ++ ){
var childObj = obj.childNodes[i];
if (childObj.nodeType == 3 ){
if (childObj.data.search(re) ==- 1 ) continue ;
var reResult = new RegExp( " ( " + keyWords + " ) " , " gi " );
var objResult = document.createElement( " span " );
objResult.innerHTML = childObj.data.replace(reResult, " <span class=' " + cssClass + " '>$1</span> " );
if (childObj.data == objResult.childNodes[ 0 ].innerHTML) continue ;
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, "" );
if (hlWords.length == 0 ) return "" ;
var wordsArr = hlWords.split( " | " );
if (wordsArr.length > 1 ){
var resultArr = BubbleSort(wordsArr);
var result = "" ;
for ( var i = 0 ;i < resultArr.length;i ++ ){
result = result + " | " + resultArr[i];
}
return result.replace( / ( ^ \ |* ) | (\ |* $) / g, "" );
} else {
return hlWords;
}
}
// -----利用冒泡排序法把长的关键词放前面-----
function BubbleSort(arr){
var temp, exchange;
for ( var i = 0 ;i < arr.length;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]; arr[j] = temp;
exchange = true ;
}
}
if ( ! exchange) break ;
}
return arr;
}
}
// ----------------end------------------------
在线演示
/* ----------------------------------------*\
* 使用 js 标记高亮关键词 by markcxz(markcxz@aol.com)
* 参数说明:
* obj: 对象, 要进行高亮显示的html标签节点.
* hlWords: 字符串, 要进行高亮的关键词词, 使用 竖杠(|)或空格 分隔多个词 .
* cssClass: 字符串, 定义关键词突出显示风格的css伪类.
* 参考资料: javascript HTML DOM 高亮显示页面特定字词 By shawl.qiu
\*---------------------------------------- */
function MarkHighLight(obj,hlWords,cssClass){
hlWords = AnalyzeHighLightWords(hlWords);
if (obj == null || hlWords.length == 0 )
return ;
if (cssClass == null )
cssClass = " highlight " ;
MarkHighLightCore(obj,hlWords);
// ------------执行高亮标记的核心方法----------------------------
function MarkHighLightCore(obj,keyWords){
var re = new RegExp(keyWords, " i " );
for ( var i = 0 ; i < obj.childNodes.length; i ++ ){
var childObj = obj.childNodes[i];
if (childObj.nodeType == 3 ){
if (childObj.data.search(re) ==- 1 ) continue ;
var reResult = new RegExp( " ( " + keyWords + " ) " , " gi " );
var objResult = document.createElement( " span " );
objResult.innerHTML = childObj.data.replace(reResult, " <span class=' " + cssClass + " '>$1</span> " );
if (childObj.data == objResult.childNodes[ 0 ].innerHTML) continue ;
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, "" );
if (hlWords.length == 0 ) return "" ;
var wordsArr = hlWords.split( " | " );
if (wordsArr.length > 1 ){
var resultArr = BubbleSort(wordsArr);
var result = "" ;
for ( var i = 0 ;i < resultArr.length;i ++ ){
result = result + " | " + resultArr[i];
}
return result.replace( / ( ^ \ |* ) | (\ |* $) / g, "" );
} else {
return hlWords;
}
}
// -----利用冒泡排序法把长的关键词放前面-----
function BubbleSort(arr){
var temp, exchange;
for ( var i = 0 ;i < arr.length;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]; arr[j] = temp;
exchange = true ;
}
}
if ( ! exchange) break ;
}
return arr;
}
}
// ----------------end------------------------
在线演示