<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>关键字高亮显示</title>
</head>
<body>
<div class="result" id="result">
<div>脚本之家是一个专业的收集各类脚本学习资料的网站,尽量修正错误打造精品脚本类学习网站,我们为大家游戏脚本资源,源码,软件,asp,php,javascript等编程资料,是网页制作,网络编程,网站建设人士的聚集场所。</div>
<span>提供最新的网络编程、脚本编程、网页制作、网页设计、网页特效,为站长与网络编程从业者提供学习资料。</span>
<div>脚本,vbscript,正则表达式,jquery,dos,bat,批处理,javascript,Photoshop,HTML,div+css,ASP,PHP,ASP.NET</div>
</div>
<!--iframe id="iframe1" style="width:600px; height:500px;" src="about:blank"></!--iframe-->
<script>
function SearchHighlight(idVal, keyword) {
var pucl = document.getElementById(idVal);
if ("" == keyword) return;
var temp = pucl.innerHTML;
var htmlReg = new RegExp("\<.*?\>", "i");
var arrA = new Array();
//替换HTML标签
for (var i = 0; true; i++) {
var m = htmlReg.exec(temp);
if (m) {
arrA[i] = m;
}
else {
break;
}
temp = temp.replace(m, "{[(" + i + ")]}");
}
words = unescape(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 < arrA.length; i++) {
temp = temp.replace("{[(" + i + ")]}", arrA[i]);
}
pucl.innerHTML = temp;
//写入iframe
/*
var iframe = document.getElementById('iframe1');
iframe.contentDocument.body.innerHTML = temp;
*/
}
SearchHighlight("result", "脚本 学习 vbscript div");
</script>
</body>
</html>

屏蔽HTML标签,支持多关键字(以空格间隔),关键字内可含有特殊字符

转自:http://www.jb51.net/article/24707.htm

javascript 关键字高亮显示实现代码的更多相关文章

  1. JS将搜索的关键字高亮显示实现代码

    这篇文章介绍了JS将搜索的关键字高亮显示实现代码,有需要的朋友可以参考一下 用JS让文章内容指定的关键字加亮 是这样的.. 现在有这些关键字:美容,生活,购物 当在文章里头出现这些关键字,就把它加亮显 ...

  2. 原生Js 两种方法实现页面关键字高亮显示

    原生Js 两种方法实现页面关键字高亮显示 上网看了看别人写的,不是兼容问题就是代码繁琐,自己琢磨了一下用两种方法都可以实现,各有利弊. 方法一 依靠正则表达式修改 1.获取obj的html2.统一替换 ...

  3. 如何实现 javascript “同步”调用 app 代码

    在 App 混合开发中,app 层向 js 层提供接口有两种方式,一种是同步接口,一种一异步接口(不清楚什么是同步的请看这里的讨论).为了保证 web 流畅,大部分时候,我们应该使用异步接口,但是某些 ...

  4. 在线运行Javascript,Jquery,HTML,CSS代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xht ...

  5. .NET Reflector 8.2支持VS2013高亮显示和代码地图视图

    Red Gate Software公司最近发布的.NET Reflector 8.2支持Visual Studio 2013,其Reflector 桌面程序能够转换十六进制/十进制值.桌面程序还支持局 ...

  6. 《Secrets of the JavaScript Ninja》:JavaScript 之运行时代码

    最近,在阅读 jQuery 之父 John Resig 力作:Secrets of the JavaScript Ninja(JavaScript忍者秘籍).关于第九章提及的 JavaScript 之 ...

  7. javascript 写一段代码,判断一个字符串中出现次数最多的字符串,并统计出现的次数

    javascript 写一段代码,判断一个字符串中出现次数最多的字符串,并统计出现的次数 function test(){ var bt = document.getElementById(" ...

  8. JavaScript创建读取cookie代码示例【附:跨域cookie解决办法】

    使用JavaScript 原生存取cookie代码示例: var cookie = { set : function(name, value, expires, path, domain, secur ...

  9. JavaScript 关键字

    JavaScript 关键字 和其他任何编程语言一样,JavaScript 保留了一些关键字为自己所用. JavaScript 同样保留了一些关键字,这些关键字在当前的语言版本中并没有使用,但在以后 ...

随机推荐

  1. 每天一个linux命令(14):head命令

    1.命令简介 head (head) 用来显示档案的开头至标准输出中.如果指定了多于一个文件,在每一段输出前会给出文件名作为文件头.如果不指定文件,或者文件为"-",则从标准输入读 ...

  2. Android之Wifi学习(1)

    在Android中对Wifi操作,android本身提供了一些实用的包.在android.net.wifi包以下.简介一下: 大致能够分为四个基本的类ScanResult,wifiConfigurat ...

  3. 微信SDK登录无法调起,微信SDK无法接收回调的几种解决办法

    今天有位同事请求帮忙调试微信登录问题,他遇到了以下2个问题,所以,写篇日志备忘,如果有其它朋友遇到此类问题,都可以照此解决! 平时在开发中,有些开发者经常会遇到微信登录SDK登录时,无法调起微信客户端 ...

  4. MySQL技术内幕读书笔记(八)——事务

    事务的实现 ​ 事务隔离性由锁来实现.原子性.一致性.持久性通过数据库的redo log和undo log来完成.redo log称为重做日志,用来保证事务的原子性和持久性.undo log用来保证事 ...

  5. DMA(直接存储器存取)

    DMA(Direct Memory Access) DMA(Direct Memory Access)即直接存储器存取,是一种快速传送数据的机制. 工作原理 DMA是指外部设备不通过CPU而直接与系统 ...

  6. TensorFlow官网无法访问

    相信很多搞深度学习的小伙伴最近都为访问不了 TensorFlow官网 而苦恼吧!虽然网上也给出了一些方法,但是却缺少一个很重要的步骤.接下来,我就给大家讲解一个完整的过程,大牛绕过. 1.更改Host ...

  7. Mac笔记本中是用Idea开发工具在Java项目中调用python脚本遇到的环境变量问题解决

    问题描述: mac笔记本本身会自带几个python版本,比如python2.7版本,我没有改动mac默认的python版本,只是安装了python3.7版本. 使用Pycharm开发Python项目没 ...

  8. Linux配置定时,使用 crontab -e 与 直接编辑 /etc/crontab 的区别

    转自:http://blog.csdn.net/catoop/article/details/41821395 版权声明:本文为博主原创文章,未经博主允许不得转载. Linux配置定时任务,大家都知道 ...

  9. MySQL 下载地址获取

    http://cdn.mysql.com/Downloads/MySQL-5.7/mysql-5.7.26-winx64.msi 首先安装 mysql installer 安装器进行安装,之前会让你选 ...

  10. Kibana学习笔记——安装和使用

    1.首先下载Kibana https://www.elastic.co/downloads 2.解压 tar -zxvf kibana-6.2.1-linux-x86_64.tar.gz -C ~/s ...