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的gzip静态压缩方法
Jan 05 Javascript
从JavaScript 到 JQuery (1)学习小结
Feb 12 Javascript
ExtJS 工具栏 分页事件参数
Mar 05 Javascript
JavaScript 格式字符串的应用
Mar 29 Javascript
javascript回车完美实现tab切换功能
Mar 13 Javascript
js图片延迟技术一般的思路与示例
Mar 20 Javascript
JS生成随机字符串的多种方法
Jun 10 Javascript
JavaScript通过filereader接口读取文件
May 10 Javascript
JavaScript实现选中文字提示新浪微博分享效果
Jun 15 Javascript
jQuery自定义多选下拉框效果
Jun 19 jQuery
JavaScript中的return布尔值的用法和原理解析
Aug 14 Javascript
原生js封装添加class,删除class的实例
Nov 06 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实现对站点内容外部链接的过滤方法
2014/09/10 PHP
smarty中英文多编码字符截取乱码问题解决方法
2014/10/28 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
JS实现很酷的水波文字特效实例
2015/02/26 Javascript
jQuery获取页面元素绝对与相对位置的方法
2015/06/10 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
2016/07/01 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
Vue中render方法的使用详解
2018/01/26 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
Redux实现组合计数器的示例代码
2018/07/04 Javascript
vue移动端实现红包雨效果
2020/06/23 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
vue实现记事本功能
2019/06/26 Javascript
vue.js的简单自动求和计算实例
2019/11/08 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
2019/12/04 Javascript
js实现多图和单图上传显示
2019/12/18 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
Python编程图形库之Pillow使用方法讲解
2018/12/28 Python
Python微信操控itchat的方法
2019/05/31 Python
pycharm新建一个python工程步骤
2019/07/16 Python
Python 生成器,迭代,yield关键字,send()传参给yield语句操作示例
2019/10/12 Python
python 实现将list转成字符串,中间用空格隔开
2019/12/25 Python
python golang中grpc 使用示例代码详解
2020/06/03 Python
keras 读取多标签图像数据方式
2020/06/12 Python
Python GUI之tkinter窗口视窗教程大集合(推荐)
2020/10/20 Python
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
日本化妆品植村秀俄罗斯官方网站:Shu Uemura俄罗斯
2020/02/01 全球购物
职业规划书如何设计?
2014/01/09 职场文书
英语故事演讲稿
2014/04/29 职场文书
国旗下讲话演讲稿
2014/05/08 职场文书
2015年禁毒工作总结
2015/04/30 职场文书
2016北大自主招生自荐信模板
2016/01/28 职场文书
Java框架入门之简单介绍SpringBoot框架
2021/06/18 Java/Android
使用 Docker Compose 构建复杂的多容器App
2022/04/30 Servers