ホームページ > 記事 > ウェブフロントエンド > JavaScript が検索結果からキーワードを自動的にタグ付けする page_JavaScript のヒント

JavaScript が検索結果からキーワードを自動的にタグ付けする page_JavaScript のヒント

WBOYオリジナル: 2016-05-16 18:35:471063ブラウズ

<style> 
/*定义样式*/ 
.hilite1{background:#69c;} 
</style> 
<script language="javascript" type="text/javascript"> 
Hilite = { 
exact: true, 
max_nodes: 1000, 
style_name: 'hilite', 
style_name_suffix: true 
}; 
Hilite.hiliteElement = function (elm, query) { 
if (!query || elm.childNodes.length == 0) 
return; 
query = query.split(/[\s,\+\.]+/); 
var qre = new Array(); 
for (var i = 0; i < query.length; i++) { 
query[i] = query[i].toLowerCase(); 
if (Hilite.exact) 
qre.push('\\b' + query[i] + '\\b'); 
else 
qre.push(query[i]); 
} 
qre = new RegExp(qre.join("|"), "i"); 
var stylemapper = {}; 
for (var i = 0; i < query.length; i++) { 
if (Hilite.style_name_suffix) 
stylemapper[query[i]] = Hilite.style_name + (i + 1); 
else 
stylemapper[query[i]] = Hilite.style_name; 
} 
var textproc = function (node) { 
var match = qre.exec(node.data); 
if (match) { 
var val = match[0]; 
var k = ''; 
var node2 = node.splitText(match.index); 
var node3 = node2.splitText(val.length); 
var span = node.ownerDocument.createElement('SPAN'); 
node.parentNode.replaceChild(span, node2); 
span.className = stylemapper[val.toLowerCase()]; 
span.appendChild(node2); 
return span; 
} else { 
return node; 
} 
}; 
Hilite.walkElements(elm.childNodes[0], 1, textproc); 
}; 
Hilite.walkElements = function (node, depth, textproc) { 
var skipre = /^(script|style|textarea)/i; 
var count = 0; 
while (node && depth > 0) { 
count++; 
if (count >= Hilite.max_nodes) { 
var handler = function () { 
Hilite.walkElements(node, depth, textproc); 
}; 
setTimeout(handler, 50); 
return; 
} 
if (node.nodeType == 1) { 
if (!skipre.test(node.tagName) && node.childNodes.length > 0) { 
node = node.childNodes[0]; 
depth++; 
continue; 
} 
} else if (node.nodeType == 3) { 
node = textproc(node); 
} 
if (node.nextSibling) { 
node = node.nextSibling; 
} else { 
while (depth > 0) { 
node = node.parentNode; 
depth--; 
if (node.nextSibling) { 
node = node.nextSibling; 
break; 
} 
} 
} 
} 
}; 
Hilite.autoForSeachEngine = function () { 
var re = new RegExp('[\\?&](q|keyword|qk|wd|p)=([^&]+)','ig'); 
var ref = document.referrer || 'http://search.yahoo.com/search?p=javascript&toggle=1&cop=mss&ei=UTF-8&fr=yfp-t-701'; 
addLoadEvent(function () { 
var match = re.exec(ref); 
if (match) { 
var query = decodeURIComponent(match[2]); 
Hilite.hiliteElement(document.getElementById('divMain'), query); 
} 
}); 
}; 
function addLoadEvent(f) { 
var old = window.onload; 
if (typeof old != 'function') window.onload = f; 
else { window.onload = function () { old(); f(); }; } 
}

Hilite.autoForSeachEngine(); 
</script> 
 
 
<div id="divMain"> 
我是test，我要被highlight。我们是javascript，我们是javascript 
</div>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：終了していない文字列定数に対する一般的な解決策 (JavaScript_javascript のヒント)次の記事：終了していない文字列定数に対する一般的な解決策 (JavaScript_javascript のヒント)

関連記事

続きを見る