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 void(0)的妙用
Oct 21 Javascript
鼠标拖动实现DIV排序示例代码
Oct 14 Javascript
探讨javascript是不是面向对象的语言
Nov 21 Javascript
jquery阻止后续事件只执行第一个事件
Jul 24 Javascript
jQuery中data()方法用法实例
Dec 27 Javascript
js智能获取浏览器版本UA信息的方法
Aug 08 Javascript
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
基于BootStrap的文本编辑器组件Summernote
Oct 27 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
Dec 11 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
Vue ElementUI实现:限制输入框只能输入正整数的问题
Jul 31 Javascript
JS实现按比例缩小图片宽高
Aug 24 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 高性能书写
2010/12/11 PHP
php中{}大括号是什么意思
2013/12/01 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
js data日期初始化的5种方法
2013/12/29 Javascript
js获取客户端网卡的IP地址、MAC地址
2014/03/26 Javascript
JavaScript中伪协议 javascript:使用探讨
2014/07/18 Javascript
通过实例理解javascript中没有函数重载的概念
2015/06/03 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
对Angular.js Controller如何进行单元测试
2016/10/25 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
2016/11/17 Javascript
通过AngularJS实现图片上传及缩略图展示示例
2017/01/03 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
10道典型的JavaScript面试题
2017/03/22 Javascript
js匿名函数使用&amp;传参(实例)
2017/09/08 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
2020/03/03 Javascript
Python3读取UTF-8文件及统计文件行数的方法
2015/05/22 Python
pandas.loc 选取指定列进行操作的实例
2018/05/18 Python
PyQt5实现让QScrollArea支持鼠标拖动的操作方法
2019/06/19 Python
Python实现王者荣耀自动刷金币的完整步骤
2021/01/22 Python
html5中localStorage本地存储的简单使用
2017/06/16 HTML / CSS
12个不为大家熟知的HTML5设计小技巧
2016/06/02 HTML / CSS
Calphalon美国官网:美国顶级锅具品牌
2020/02/05 全球购物
Pandora德国官网:购买潘多拉手链、戒指、项链和耳环
2020/02/20 全球购物
什么是Linux虚拟文件系统VFS
2012/01/31 面试题
公务员的自我鉴定
2013/10/26 职场文书
餐饮业经理竞聘演讲稿
2014/01/14 职场文书
2014年房地产销售工作总结
2014/12/01 职场文书
先进工作者申报材料
2014/12/23 职场文书
2015年财务人员工作总结
2015/04/10 职场文书
2015个人年度工作总结范文
2015/05/28 职场文书
培训后的感想
2015/08/07 职场文书
学生会主席任命书
2015/09/21 职场文书
送给火锅店的创意营销方案!
2019/07/08 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书
Golang表示枚举类型的详细讲解
2021/09/04 Golang
C3 线性化算法与 MRO之Python中的多继承
2021/10/05 Python