JavaScript识别网页关键字并进行描红的方法


Posted in Javascript onNovember 09, 2015

本文实例讲述了JavaScript识别网页关键字并进行描红的方法。分享给大家供大家参考,具体如下:

这里演示JavaScript智能识别网页关键字并加红显示出来,相信这个效果大家不陌生吧,用JS加红关键字要比程序控制输出好得多,必竟将一部分功能交给了客户浏览器,相应减轻了服务器的压力。

运行效果截图如下:

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>JS查询替换关键字</title>
<style type="text/css">
span{color:#f00;font-weight:bold;}
</style>
</head>
<body>
<div>我是标题:这里是文字介绍!</div>
<div>我是老二:老二的描述性文字。</div>
<script type="text/javascript">
var divs = document.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
  var text = divs[i].innerHTML;
  var index = text.indexOf(':');
  var span = document.createElement('span');
  span.innerHTML = text.substring(0,index+1);
  divs[i].innerHTML = text.substring(index+1);
  divs[i].insertBefore(span,divs[i].firstChild);
}
</script>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
ArrayList类(增强版)
Apr 04 Javascript
javascript 写类方式之六
Jul 05 Javascript
Javascript 网页水印(非图片水印)实现代码
Mar 01 Javascript
JavaScript原型继承之基础机制分析
Aug 26 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
Oct 12 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
Dec 08 Javascript
JavaScript中操作Mysql数据库实例
Apr 02 Javascript
AngulerJS学习之按需动态加载文件
Feb 13 Javascript
原生js中ajax访问的实例详解
Sep 19 Javascript
Node.js Buffer模块功能及常用方法实例分析
Jan 05 Javascript
Django+Vue实现WebSocket连接的示例代码
May 28 Javascript
vue实现信息管理系统
May 30 Javascript
JS实现兼容性较好的随屏滚动效果
Nov 09 #Javascript
初步了解javascript面向对象
Nov 09 #Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
Nov 09 #Javascript
JS实现网页每隔3秒弹出一次对话框的方法
Nov 09 #Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
Nov 09 #Javascript
JavaScript实现同时调用多个函数的方法
Nov 09 #Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 #Javascript
You might like
php提示undefined index的几种解决方法
2012/05/21 PHP
基于PHP5魔术常量与魔术方法的详解
2013/06/13 PHP
thinkphp中空模板与空模块的用法实例
2014/11/26 PHP
Yii框架调试心得--在页面输出执行sql语句
2014/12/25 PHP
PHP数组去重比较快的实现方式
2016/01/19 PHP
Yii框架数据模型的验证规则rules()被执行的方法
2016/12/02 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
Yii框架自定义数据库操作组件示例
2019/11/11 PHP
javascript实现的基于金山词霸网络翻译的代码
2010/01/15 Javascript
ajax处理php返回json数据的实例代码
2013/01/24 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
2013/04/01 Javascript
使用Chart.js图表库制作漂亮的响应式表单
2015/10/28 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
微信小程序使用npm包的方法步骤
2019/08/13 Javascript
[36:33]Ti4 循环赛第四日 附加赛NEWBEE vs Mouz
2014/07/13 DOTA
[01:03:37]Secret vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python实现的Kmeans++算法实例
2014/04/26 Python
python实现SMTP邮件发送功能
2020/06/16 Python
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
Python对多属性的重复数据去重实例
2018/04/18 Python
实用自动化运维Python脚本分享
2018/06/04 Python
python利用百度AI实现文字识别功能
2018/11/27 Python
使用python动态生成波形曲线的实现
2019/12/04 Python
关于ZeroMQ 三种模式python3实现方式
2019/12/23 Python
PyTorch的SoftMax交叉熵损失和梯度用法
2020/01/15 Python
娇韵诗俄罗斯官方网站:Clarins俄罗斯
2020/10/03 全球购物
创立科技Java面试题
2015/11/29 面试题
幼教毕业生自我鉴定
2014/01/12 职场文书
单位单身证明样本
2014/10/11 职场文书
2015年清明节演讲稿范文
2015/03/17 职场文书
个人维稳承诺书
2015/05/04 职场文书
Python使用psutil库对系统数据进行采集监控的方法
2021/08/23 Python
关于 Python json中load和loads区别
2021/11/07 Python
Python采集壁纸并实现炫轮播
2022/04/30 Python
基于redis+lua进行限流的方法
2022/07/23 Redis