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 相关文章推荐
JavaScript 基础问答三
Dec 03 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
Dec 17 Javascript
JQuery的ready函数与JS的onload的区别详解
Nov 21 Javascript
基于jQuery实现的文字按钮表单特效整理
Dec 07 Javascript
百度地图API之本地搜索与范围搜索
Jul 30 Javascript
jQuery fadeOut 异步实例代码详解
Aug 18 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
Jul 20 Javascript
详解angularjs实现echart图表效果最简洁教程
Nov 29 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
May 09 Javascript
react 中父组件与子组件双向绑定问题
May 20 Javascript
基于JavaScript实现大文件上传后端代码实例
Aug 18 Javascript
JS实现拖拽元素时与另一元素碰撞检测
Aug 27 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
用文本文件实现的动态实时发布新闻的程序
2006/10/09 PHP
php函数的常用方法及注意之处小结
2011/07/10 PHP
PHP 面向对象程序设计(oop)学习笔记(三) - 单例模式和工厂模式
2014/06/12 PHP
php使用pdo连接mssql server数据库实例
2014/12/25 PHP
PHP使用PDO连接ACCESS数据库
2015/03/05 PHP
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
2007/04/12 Javascript
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
2013/08/23 Javascript
jQuery+ajax实现动态执行脚本的方法
2015/01/27 Javascript
js光标定位文本框回车表单提交问题的解决方法
2015/05/11 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
jQuery操作基本控件方法实例分析
2015/12/31 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
2016/05/17 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
2017/05/23 Javascript
你可能不知道的JSON.stringify()详解
2017/08/17 Javascript
JS和Canvas实现图片的预览压缩和上传功能
2018/03/30 Javascript
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
详解VS Code使用之Vue工程配置format代码格式化
2019/03/20 Javascript
layui 实现表格某一列显示图标
2019/09/19 Javascript
node.js使用yargs处理命令行参数操作示例
2020/02/11 Javascript
Vue项目接入Paypal实现示例详解
2020/06/04 Javascript
[02:32]“虐狗”镜头慎点 2016国际邀请赛中国区预选赛现场玩家采访
2016/06/28 DOTA
Python中lambda的用法及其与def的区别解析
2014/07/28 Python
python安装gdal的两种方法
2019/10/29 Python
基于python+selenium的二次封装的实现
2020/01/06 Python
2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用
2020/03/24 Python
Python自动化操作实现图例绘制
2020/07/09 Python
Django解决frame拒绝问题的方法
2020/12/18 Python
澳大利亚首屈一指的在线购物目的地:Kogan.com
2017/02/02 全球购物
Crabtree & Evelyn欧盟:豪华洗浴、身体和护发
2021/03/09 全球购物
应届大学生求职的自我评价
2013/11/17 职场文书
团员的自我评价
2013/12/01 职场文书
小学数学国培感言
2014/03/10 职场文书
平安建设实施方案
2014/03/19 职场文书
全国劳模先进事迹材料(2016精选版)
2016/02/25 职场文书