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的Function详细
Nov 14 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
Dec 17 Javascript
jQuery点击tr实现checkbox选中的方法
Mar 19 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
Jun 04 Javascript
js QQ客服悬浮效果实现代码
Dec 12 Javascript
jquery 表单验证之通过 class验证表单不为空
Nov 02 Javascript
jQuery 移动端artEditor富文本编辑器
Jan 11 Javascript
javascript作用域链与执行环境详解
Mar 25 Javascript
angular bootstrap timepicker TypeError提示怎么办
Jun 13 Javascript
Three.js基础学习教程
Nov 16 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
Jan 20 Javascript
js实现简易拖拽的示例
Oct 26 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相关资料
2006/10/09 PHP
PHP中路径问题的解决方案
2006/10/09 PHP
PHP+MYSQL的文章管理系统(一)
2006/10/09 PHP
php&amp;java(二)
2006/10/09 PHP
怎样在UNIX系统下安装MySQL
2006/10/09 PHP
深入浅析PHP7.0新特征(五大新特征)
2015/10/29 PHP
PHP扩展开发教程(总结)
2015/11/04 PHP
php版微信公众平台开发之验证步骤实例详解
2016/09/23 PHP
PHP根据key删除数组中指定的元素
2019/02/28 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
JavaScript起点(严格模式深度了解)
2013/01/28 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
2013/03/06 Javascript
js 获取input点选按钮的值的方法
2014/04/14 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
2016/05/13 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
2017/07/24 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
2017/08/17 Javascript
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
jQuery实现的简单无刷新评论功能示例
2017/11/08 jQuery
vue webpack实用技巧总结
2018/04/24 Javascript
微信小程序整合使用富文本编辑器的方法详解
2019/04/25 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
Python lambda和Python def区别分析
2014/11/30 Python
Python对list列表结构中的值进行去重的方法总结
2016/05/07 Python
Python端口扫描简单程序
2016/11/10 Python
Django admin美化插件suit使用示例
2017/12/12 Python
微信跳一跳游戏python脚本
2020/04/01 Python
Python 使用list和tuple+条件判断详解
2019/07/30 Python
python使用if语句实现一个猜拳游戏详解
2019/08/27 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
HTML5之SVG 2D入门5—颜色的表示及定义方式
2013/01/30 HTML / CSS
Magee 1866官网:Donegal粗花呢外套和大衣专家
2019/11/01 全球购物
学生个人的自我评价分享
2013/11/05 职场文书
Python手拉手教你爬取贝壳房源数据的实战教程
2021/05/21 Python
matplotlib如何设置坐标轴刻度的个数及标签的方法总结
2021/06/11 Python