javascript 自动标记来自搜索结果页的关键字

更新时间：2010年01月25日 22:35:08 作者：

使用javascript自动标记来自搜索结果页的关键字的实现代码。

<html> <head> <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> </head> <body> <div id="divMain"> 我是test，我要被highlight。我们是javascript，我们是javascript </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

浅谈Javascript线程及定时机制
这篇文章主要介绍了浅谈Javascript线程及定时机制的相关资料,需要的朋友可以参考下
2015-07-07
前端实现获取后端返回的文件流并下载三种方法
文件下载是最常见的流形式返回数据的应用场景之一,通过流形式返回文件内容,可以避免将整个文件加载到内存中,从而减少内存消耗,这篇文章主要介绍了前端实现获取后端返回的文件流并下载的三种方法,需要的朋友可以参考下
2025-04-04
async/await实现Promise.all()的方式
Promise.all() 方法接收一个 promise 的 iterable 类型的输入，并且只返回一个Promise实例，并且输入的所有 promise 的 resolve 回调的结果是一个数组，对async/await实现Promise.all()相关知识感兴趣的朋友一起看看吧
2022-12-12
nuxtjs通过ecosystem.config.js配置pm2的方法
ecosystem.config.js 是一个特殊的配置文件,它允许您定义应用的各种属性,如脚本路径、环境变量、日志设置等,这篇文章主要介绍了nuxtjs通过ecosystem.config.js配置pm2的方法,需要的朋友可以参考下
2024-03-03
老生常谈JavaScript 数组方法
本文详细介绍了JavaScript数组方法的分类和具体用法,涵盖了数组的添加/删除、查找/访问、遍历、排序/反转、转换以及一些其他实用方法,每种方法都提供了简要的解释和示例代码,帮助读者更好地理解和应用这些方法,感兴趣的朋友一起看看吧
2025-03-03
javascript匿名函数应用示例介绍
匿名函数，顾名思义就是没有名字，下面有个不错的示例，大家可以学习下
2014-03-03
详解webpack+ES6+Sass搭建多页面应用
这篇文章主要介绍了webpack+ES6+Sass搭建多页面应用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-11-11
JavaScript获取按钮所在form表单id的方法
这篇文章主要介绍了JavaScript获取按钮所在form表单id的方法,涉及javascript操作表单按钮属性的技巧,非常具有实用价值,需要的朋友可以参考下
2015-04-04
使用Dropzone.js上传的示例代码
本篇文章主要介绍了使用Dropzone.js上传的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
解决echarts官网打不开访问失败的问题
这篇文章主要介绍了解决echarts官网打不开访问失败的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10

javascript 自动标记来自搜索结果页的关键字

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具