JavaScript正则方法replace实现搜索关键字高亮显示
前言
正则表达式是字符串处理工具中强有力的工具.也有人认为这只是一个小玩具,但不管怎么说都离不开它.
这里介绍的是JavaScript的正则表达式的replace方法 ,和实现搜索关键字高亮的功能.
先介绍一下正则表达式的replace方法
replace介绍
w3school原文链接介绍
正则表达式如何使用特殊字符$来表示原来的文本,这是实现搜索高亮的关键,
var str = "asad sad 123 sd qwe21"; str.replace(/\d+/img,"数字"); //这里正确的匹配到了数字,且替换成了中文的数字 console.log(str);//"asad sad 数字 sd qwe数字" ------------------------------------------------------ //看一下如何使用$1,表示被捕获的字符串 var str = "asad sad 123 sd qwe21"; str.replace(/\d+/img,"数字$1数字"); console.log(str);//"asad sad 数字$1数字 sd qwe数字$1数字" //很显然并没有成功,$1 还是$1,那么如何正确使用呢? ------------------------------------------------------ var str = "asad sad 123 sd qwe21"; str.replace(/(\d+)/img,"数字$1数字"); //这里就正确的匹配了数字并且用$1 表示原字符串并替换 console.log(str);///"asad sad 数字123数字 sd qwe数字21数字" /* ()在正则里面表示捕获性元组,可以用$1 特殊字符来表示被替换的内容,可以有多个()元组,也就是可以有多个$1,$2 */
开始小试身手
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<style>
b{
color:red;
}
</style>
<div id="poetry">
春江花月夜<br>
作者：张若虚<br>
春江潮水连海平，海上明月共潮生。 <br>
滟滟随波千万里，何处春江无月明！ <br>
江流宛转绕芳甸，月照花林皆似霰； <br>
空里流霜不觉飞，汀上白沙看不见。 <br>
江天一色无纤尘，皎皎空中孤月轮。 <br>
江畔何人初见月？江月何年初照人？ <br>
人生代代无穷已，江月年年只相似。 <br>
</div>
<input type ="text" id="input" />
</body>
</html>
<script>
//input 输入要查找的字符串
input.onchange = function(){
//获取要查找的字符串
var searchVal = input.value;
// 获取要查找的内容
var text = poetry.innerHTML;
//将之前的查找高亮的字符串,取消高亮
text = text.replace(/<b[^>]*>([^>]*)<\/b[^>]*>/ig,"$1");
poetry.innerHTML = text;
//初始化正则表达式,加上括号(),形成可捕获元组.ig表示全局匹配和不区分大小写
var reg = new RegExp("("+searchVal +")","ig");
//高亮要查找的字符串
text = text.replace(reg,"<b>$1</b>");
poetry.innerHTML = text;
}
</script>
总结
以上所述是小编给大家介绍的JavaScript正则方法replace实现搜索关键字高亮显示，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持！
-
本文向大家介绍Vue实现搜索结果高亮显示关键字，包括了Vue实现搜索结果高亮显示关键字的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了Vue实现搜索结果高亮显示关键字的具体代码，供大家参考，具体内容如下 1. 需要解决的问题 父组件将搜索的字段传到子组件 子组件接受数据，正则匹配，并替换字段 2. 具体代码 父组件代码 子组件代码 以上就是本文的全部内容，希望对大家的学习有所帮助，也
-
本文向大家介绍JavaScript实现关键字高亮功能，包括了JavaScript实现关键字高亮功能的使用技巧和注意事项，需要的朋友参考一下 高亮功能主要是指对页面中指定区域的指定文字进行高亮显示，也就是背景着色。一般在搜索结果页面会经常用到这个功能。 下面就为大家提供一种解决方案，用javascript实现。 首先在<head>中引入下面javascript方法： 上面的fHl方法就是用来实现高亮
-
本文向大家介绍vue2实现搜索结果中的搜索关键字高亮的代码，包括了vue2实现搜索结果中的搜索关键字高亮的代码的使用技巧和注意事项，需要的朋友参考一下 具体代码如下所示： 开源项目地址： github.com/alex-0407/v… 效果演示 总结 以上所述是小编给大家介绍的vue2实现搜索结果中的搜索关键字高亮的代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此
-
本文向大家介绍jquery实现页面关键词高亮显示的方法，包括了jquery实现页面关键词高亮显示的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jquery实现页面关键词高亮显示的方法。分享给大家供大家参考。具体分析如下： 通过jquery对页面搜索关键词进行高亮显示 支持中文多词页面中高亮显示 1. JavaScript代码如下： 2.highlight插件点击此处下载。 希望本文
-
本文向大家介绍jQuery实现高亮显示网页关键词的方法，包括了jQuery实现高亮显示网页关键词的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现高亮显示网页关键词的方法。分享给大家供大家参考。具体如下： 这是一款基于jquery实现的高亮显示网页上搜索关键词的代码，当你在文本框中输入的时候，如果下面的正文中包括你输入的内容，也就是关键字，那么这些关键字是会高亮显示的，
-
本文向大家介绍JavaScript实现的搜索及高亮显示功能示例，包括了JavaScript实现的搜索及高亮显示功能示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JavaScript实现的搜索及高亮显示功能。分享给大家供大家参考，具体如下： 情景: 用来筛选列表中的数据, 由于单条数据很简短, 没有用php+mysql去实现筛选功能, 只用javascript进行筛选, 匹配的高亮,