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 相关文章推荐
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
Oct 11 Javascript
JavaScript包装对象使用介绍
Aug 29 Javascript
jquery获取css中的选择器(实例讲解)
Dec 02 Javascript
JavaScript实现的图像模糊算法代码分享
Apr 22 Javascript
jQuery带箭头提示框tooltips插件集锦
Nov 17 Javascript
jquery中checkbox使用方法简单实例演示
Nov 24 Javascript
让编辑器支持word复制黏贴、截屏的js代码
Oct 17 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
May 25 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
Jul 26 Javascript
vue引入axios同源跨域问题
Sep 27 Javascript
基于JS开发微信网页录音功能的实例代码
Apr 30 Javascript
js定时器出现第一次延迟的原因及解决方法
Jan 04 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设计模式 Delegation(委托模式)
2011/06/26 PHP
php图片加水印原理(超简单的实例代码)
2013/01/18 PHP
简单的php新闻发布系统教程
2014/05/09 PHP
PHP中copy on write写时复制机制介绍
2014/05/13 PHP
JS维吉尼亚密码算法实现代码
2010/11/09 Javascript
Javascript的时间戳和php的时间戳转换注意事项
2013/04/12 Javascript
JS实现控制表格单元格垂直对齐的方法
2015/03/30 Javascript
JavaScript 事件绑定及深入
2015/04/13 Javascript
angularjs+bootstrap实现自定义分页的实例代码
2017/06/19 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
2017/10/28 jQuery
vue中的数据绑定原理的实现
2018/07/02 Javascript
详解webpack import()动态加载模块踩坑
2018/07/17 Javascript
vue router 源码概览案例分析
2018/10/09 Javascript
详解Nuxt.js 实战集锦
2019/11/19 Javascript
JS前端广告拦截实现原理解析
2020/02/17 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
[54:56]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第三局
2016/03/06 DOTA
python编程实现归并排序
2017/04/14 Python
python itchat实现微信好友头像拼接图的示例代码
2017/08/14 Python
Python绑定方法与非绑定方法详解
2017/08/18 Python
JSONLINT:python的json数据验证库实例解析
2017/11/28 Python
Python numpy实现数组合并实例(vstack,hstack)
2018/01/09 Python
Python selenium如何打包静态网页并下载
2020/08/12 Python
Python环境使用OpenCV检测人脸实现教程
2020/10/19 Python
Python基于Serializer实现字段验证及序列化
2020/11/04 Python
python 模拟登录B站的示例代码
2020/12/15 Python
Python+unittest+requests+excel实现接口自动化测试框架
2020/12/23 Python
python os.listdir()乱码解决方案
2021/01/31 Python
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
日本运动品牌美津浓官方购物网站:MIZUNO SHOP
2016/08/21 全球购物
The Hut德国站点:时装、家居用品、美容等
2016/09/23 全球购物
介绍一下如何优化MySql
2016/12/20 面试题
酒店出纳岗位职责
2013/12/29 职场文书
大学毕业生求职自荐信
2014/02/20 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
Nginx配置文件详解以及优化建议指南
2021/09/15 Servers