JavaScript实现段落文本高亮
时间:2022-04-22
本文章向大家介绍JavaScript实现段落文本高亮,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
代码:
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>文本高亮</title>
<style>
.bg-red {
background-color: red;
}
</style>
</head>
<body>
<div style="margin: 20px auto;text-align: center;">
<input type="text" id="search" placeholder="输入要搜索的内容">
</div>
<div style="width: 90%;margin: 20px auto;" id="con">
<p>在Web开发中经常会碰到需要动态监听输入框值变化的情况,如果使用 onkeydown、onkeypress、onkeyup 这个几个键盘事件来监测的话,监听不了右键的复制、剪贴和粘贴这些操作,处理组合快捷键也很麻烦。</p>
<p>js的replace默认替换只替换第一个匹配的字符,如果字符串有超过两个以上的对应字符就无法进行替换,这时候就要进行一点操作,进行全部替换。 var strM = "这是要被替换的字符串啊啊!...</p>
<p>最近在帮公司一个小孩看一个很奇怪的bug,是MFC 的一个小GUI,在客户环境上一个输入框中的数据总是有乱码,导致从数据库中查不出数据。但是奇怪的是在我们环境上重现不了,因为我们的测试环境用的是Win...</p>
</div>
</body>
<script>
window.onload = function () {
var pNodes = document.getElementById('con').getElementsByTagName('p');
var searchNode = document.getElementById('search');
var pTextArr = [];
for(var i=0; i<pNodes.length; i++){
pTextArr.push(pNodes[i].innerHTML);
}
//监听文本框的内容的变化
searchNode.addEventListener('input', function (e) {
var text = this.value; //要匹配的文字
for(var i=0; i<pNodes.length; i++){
var pNode = pNodes[i]; //段落节点
var pText = pTextArr[i]; //每一段的文字
var values = pText.split(text);
var pNodeText = values.join('<span class="bg-red">'+text+'</span>');
pNode.innerHTML = pNodeText;
}
})
}
</script>
</html>
效果:
- lambda表达式杂谈
- python爬虫入门(七)Scrapy框架之Spider类
- python爬虫入门(八)Scrapy框架之CrawlSpider类
- python爬虫入门(九)Scrapy框架之数据库保存
- Numpy 修炼之道(1) —— 什么是 Numpy
- TensorFlow修炼之道(3)——计算图和会话(Graph&Session)
- 1.python简介
- 《Python自然语言处理》答案第三章
- 2.python数据类型
- Miller Rabin算法详解
- 3.python文件操作
- TensorFlow修炼之道(2)——变量(Variable)
- 4.python迭代器生成器装饰器
- 洛谷P2044 [NOI2012]随机数生成器
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 介绍一款 API 敏捷开发工具
- XSS(跨站脚本攻击)简单讲解
- Java中多线程的使用(超级超级详细)线程池 7
- Python 将土味情话语录设置为桌面壁纸
- Java中多线程的使用(超级超级详细)线程安全原理解析 4
- Java中多线程的使用(超级超级详细) Thead类的使用 3
- Java Properties集合基础解析
- File 类基础解析3 文件过滤器优化
- 原创 | 我在git merge的时候遇到了冲突,怎么解决?
- protobuffer的前世今生(一)——简介
- protobuffer的前世今生(二)——编码
- Java中多线程的使用(超级超级详细)+多线程的实现原理 2
- protobuffer的前世今生(三)——序列化和反序列化性能比较
- 女生勿扰,只适合男孩子的 Python 爬虫,里面东西不给钱统统白送
- LTP 4来了!