javascript实现页面内关键词高亮显示代码

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8" />
<title>关键字高亮显示</title>
</head>
<body>
<div class="result" id="textbox">
<p>百度（Nasdaq简称：BIDU）是全球最大的中文搜索引擎，2000年1月由李彦宏、徐勇两人创立于北京中关村，致力于向人们提供“简单，可依赖”的</p>
<p>信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”，象征着百度对中文信息检索技术的执著追求。</p>
</div>
<script>
function highlight(idVal, keyword) {
var textbox = document.getElementById(idVal);
if ("" == keyword) return;
//获取所有文字内容
var temp = textbox.innerHTML;
console.log(temp);
var htmlReg = new RegExp("\<.*?\>", "i");
var arr = new Array();

//替换HTML标签
for (var i = 0; true; i++) {
//匹配html标签
var tag = htmlReg.exec(temp);
if (tag) {
arr[i] = tag;
} else {
break;
}
temp = temp.replace(tag, "{[(" + i + ")]}");
}

// 讲关键词拆分并入数组
words = decodeURIComponent(keyword.replace(/\,/g, ' ')).split(/\s+/);

//替换关键字
for (w = 0; w < words.length; w++) {
// 匹配关键词，保留关键词中可以出现的特殊字符
var r = new RegExp("(" + words[w].replace(/[(){}.+*?^$|\\\[\]]/g, "\\$&") + ")", "ig");
temp = temp.replace(r, "<b style='color:Red;'>$1</b>");
}

//恢复HTML标签
for (var i = 0; i < arr.length; i++) {
temp = temp.replace("{[(" + i + ")]}", arr[i]);
}
textbox.innerHTML = temp;
}
highlight("textbox","百度,李彦宏");
</script>
</body>
</html>

赞 (0)

相关推荐

  • firefox下javascript实现高亮关键词的方法

    复制代码 代码如下: IE下有:   var range = document.createRange();   FireFox下有:   var range = document.body.createTextRange(); IE下有findText及pasteHTML,但是fireFox下就没有!怎么办?查了好多资料,都没有能说出个所以然的,皇天不负有心人,终于让我给搞出来了! 注:我这里不是用正则替换,因为正则替换有它的不足之处! 不知道先前有没有高人研究过这种方法. Untitled

  • JS实现获取来自百度,Google,soso,sogou关键词的方法

    本文实例讲述了JS实现获取来自百度,Google,soso,sogou关键词的方法.分享给大家供大家参考,具体如下: /*可获取用户,通过哪个关键词访问该页,可自行添加SOGOU,SOSO,有道等搜索引擎*/ var refer=document.referrer; var sosuo=refer.split(".")[1]; var grep=null; var str=null; var keyword=null; switch(sosuo){ case "baidu&q

  • 使用 js+正则表达式为关键词添加链接

    使用 js+正则表达式为关键词添加链接

    要求把一段html脚本中的疾病名添加到疾病库的链接,只添加一次,要避开超链接或图片链接. 最初是用的    str.replace('糖尿病', '<a href=...>糖尿病</a>'); 结果找了半天,愣是没找到替换后的效果,原来是有个图片的title中包含糖尿病,被它捷足先登了. 因此要把<a>链接.<img>标签避开,但<p><div>等标签不用避开 上图: 复制代码 代码如下: s = "<a href='

  • js文本中搜索关键词输入效果

    搜索类型 文章 图片 商品 点评 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • js 关键词高亮(根据ID/tag高亮关键字)案例介绍

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • JS实现搜索关键词的智能提示功能

    JS实现搜索关键词的智能提示功能

    最近在百度搜索的时候,当你输入一个字或者词的时候,他会给你们弹出一个下拉框出来,里面是和你相关的搜索提示 比如 我输入杨字,他会给我提示以下搜索提示 我尝试着用JavaScript做了一个类似的练习,以下是我用VS2013写的代码,有不对的地方,请不吝赐教. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Cont

  • javascript实现页面内关键词高亮显示代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • JavaScript禁止页面操作的示例代码

    单的JS禁止页面右键菜单--避免网站信息被盗用 复制代码 代码如下: <script type="text/javascript">  function block(oEvent){   if(window.event)    oEvent=window.event;   if(oEvent.button==2)    alert("鼠标右键不可用");  }  document.onmousedown=block;</script> 网页上

  • 在JSP页面内编写java代码方法总结

    JSP脚本元素的类型 脚本元素提供了在jsp中插入java代码的能力.脚本元素有三种类型: 脚本(scriptlet): 是JSP页面中Java代码片段的容器.将页面转换为servlet类时,会将scriptlet内容插入到servlet类的jspService()方法中,同时从JSP生成servlet.语法如下: <% java源代码 %> 表达式(expression): 用于将转换为String的Java表达式的值插入到返回给客户端的响应中.语法如下: <%= 表达式语句 %>

  • jquery实现页面关键词高亮显示的方法

    本文实例讲述了jquery实现页面关键词高亮显示的方法.分享给大家供大家参考.具体分析如下: 通过jquery对页面搜索关键词进行高亮显示 支持中文多词页面中高亮显示 1. JavaScript代码如下: 复制代码 代码如下: jQuery.fn.extend({     highlight: function(search, configs){         if(typeof(search) == 'undefined') return;         var configs =  jQ

  • 用JavaScript获取页面文档内容的实现代码

    JavaScript的document对象包含了页面的实际内容,所以利用document对象可以获取页面内容,例如页面标题.各个表单值. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js基础</title> </head> <body> <p>一. 用Documen

  • JavaScript获取页面上某个元素的代码

    JavaScript获取页面上某个元素的代码

    W3C标准推荐的语法是通过document文档对象获取DOM树内的内的某个元素,常见的方法有getElementById().getElementsByName().getElementsByTagName(),他们的作用分别通过id属性.name属性/标签名称返回单个节点或节点集合. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/

  • JavaScript实现同一页面内两个表单互相传值的方法

    JavaScript实现同一页面内两个表单互相传值的方法

    本文实例讲述了JavaScript实现同一页面内两个表单互相传值的方法.分享给大家供大家参考.具体如下: 有时候我们在提交表单的时候需要将两个表单的值互相传递,那么如何实现呢?其实很简单,就是用JavaScrip获取任一表单的值,然后赋给另一个,具体可看代码,代码很有意思,也很实用. 运行效果截图如下: 具体代码如下: <html> <head> <title>JavaScript同一页面两个表单互相传值</title> <meta http-equi

  • 纯html+css+javascript实现楼层跳跃式的页面布局（实例代码）

    纯html+css+javascript实现楼层跳跃式的页面布局（实例代码）

    实现效果演示: 实现代码及注释: <!DOCTYPE html> <html> <head> <title>楼层跳跃式的页面布局</title> <meta charset="utf-8"> <style type="text/css"> *{ margin: 0; padding: 0; } body, html{ height: 100%; } ul{ list-style: n

  • javascript 打印页面代码

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>javascript打印页面</title> <script type="text/javascript"><!-- function fPrint(){ //隐藏不需要打印的内容. document.getElementById("divOperate

  • vue 基于abstract 路由模式 实现页面内嵌的示例代码

    vue 基于abstract 路由模式 实现页面内嵌的示例代码

    abstract 路由模式 abstract 是vue路由中的第三种模式,本身是用来在不支持浏览器API的环境中,充当fallback,而不论是hash还是history模式都会对浏览器上的url产生作用,本文要实现的功能就是在已存在的路由页面中内嵌其他的路由页面,而保持在浏览器当中依旧显示当前页面的路由path,这就利用到了abstract这种与浏览器分离的路由模式. 路由示例 export const routes = [ { path: "/", redirect: "

随机推荐