首先,要想到用户可能输入任意字符,所以要先处理正则里面的有特殊意义的字符。如下:
function pregQuote_(str){
return str.replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\|\:])/g, '\\$1');
}
做好了上面的基本处理,要对搜索的内容进行高亮显示,一般来说只需要做进行一个简单的替换就好:
如下:
/*
searchValue:搜索的内容
pregSearchValue:处理后的搜索内容
sourceValue:需要进行搜索的内容
*/
pregSearchValue = pregQuote_(searchValue);
var re = new RegExp(pregSearchValue,'g');
sourceValue = sourceValue.replace(re,'<b>' + searchValue + '</b>');
但是,如果我们对某段内容进行搜索,而这段内容是html格式,那么,我们就会希望对标签内的内容不进行搜索,而只对显示的内容进行搜索。那么我们就需要修改我们的替换正则了。
如下:
/*
searchValue:搜索的内容
pregSearchValue:处理后的搜索内容
sourceValue:需要进行搜索的内容
*/
pregSearchValue = pregQuote_(searchValue);
var re = new RegExp('([^>]*)' + pregSearchValue + '([^>]*<)', 'g');
sourceValue = sourceValue.replace(re,'$1<b>' +searchValue+'</b>$2');
var re2 = new RegExp('(>[^<]*)' +pregSearchValue + '([^<]*)', 'g');
sourceValue = sourceValue.replace(re2,'$1<b>' + searchValue +'</b>$2');
但是这个正则只适用于这段内容存在html标签,如果不存在的话就则用前面那个简单的匹配就好了。
如果这段html出现一些<>这种符号,则会影响上面那个正则的判断。
这个时候,我们需要把这段html改成html标准的源码格式,这样出现在显示内容中的<>就会变成<>这种格式的。同时搜索内容也要进行这种转义的替换,确保搜索的内容和线上的内容转换成相同内容的不同格式。
最终代码如下:
/*sourceText:为转义过的html*/
var tempNode = document.createElement('div');
tempNode.innerHTML = sourceValue;
sourceText = tempNode.innerHTML;
function highLightedText(searchValue,sourceText){
/*sourceText:为转义过的html*/
var tempNode = document.createElement('div');
tempNode.innerHTML = sourceValue;
sourceText = tempNode.innerHTML;
searchValue = searchValue.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>')
pregSearchValue = pregQuote_(searchValue);
if(if(sourceText.indexOf('<')!=-1){
var re = new RegExp('([^>]*)' + pregSearchValue + '([^>]*<)', 'g');
sourceText = sourceText.replace(re,'$1<b>' +searchValue+'</b>$2');
var re2 = new RegExp('(>[^<]*)' +pregSearchValue + '([^<]*)', 'g');
sourceText = sourceText.replace(re2,'$1<b>' + searchValue +'</b>$2');
}else{
var re = new RegExp(pregSearchValu, 'g');
sourceText = sourceText.replace(re,'<b>' + searchValue +'</b>');
}
return sourceText;
}
不过,由于做了两次遍历,所以会对部分内容做两个<b>的嵌套。不过也不影响效果。
分享到:
相关推荐
NULL 博文链接:https://cn-legend.iteye.com/blog/1319491
json字符串很有用,有时候一些后台接口返回的信息是字符串格式的,可读性很差,这个时候要是有个可以格式化并高亮显示json串的方法那就好多了,下面看看一个正则表达式完成的json字符串的格式化与高亮显示 首先是对...
里介绍的是JavaScript的正则表达式的replace方法 ,和实现搜索关键字高亮的功能.先介绍一下正则表达式的replace方法,具体内容详情大家参考下本
语法词法高亮显示,在线网站支持查看、搜索,提交收录正则 特色: 常用正则片断,双击即可加载到正则输入框 替换片断,双击即可加载到替换输入框, 本地文档可以保存测试的各种状态:正则,替换,正则选项,测试...
windows 版本 正则表达式测试工具。支持正则测试、正则替换测试。 正则结果高亮。匹配结果分组显示,结果更清晰。提供不区分大小写、单行搜索、多行搜索、从右到左搜索 复选框,一键切换。
特点: 1 自定义语法高亮,支持HTML, ... 8 使用标准的正则表达式搜索和替换 9 可以使用半透明模式,cool 10 快速放大、缩小页面,不用再设定字体大小 11 可以指定ESC键最小化Notepad2到系统托盘或者关闭Notepad2
主要介绍了Android 搜索结果匹配关键字且高亮显示功能,需要的朋友可以参考下
可使用正则等多种方式进行搜索文本内容........... 也可以定义高亮显示的字符.............
实现搜索文字高亮显示效果,该效果不但可以支持给文本视图添加文字搜索功能,也就是支持字符串和正则表达式搜索,而且还可以对搜索到的文字进行高亮显示等效果,非常不错的ios源码案例。
超过 120 种语言的语法高亮显示(可以导入TextMate/Sublime/ .tmlanguage文件) 超过 20 个主题(可以导入TextMate/Sublime/ .tmtheme文件) 自动缩进和升级 一个可选的命令行 处理巨大的文档(最后检查,4,000,000 ...
根据关键字搜索网页内容,并且高亮显示内容中的关键字 细节分析: 1、每次执行搜索操作,需清空上一次结果 2、需区分html标签和正常文本内容,否则为关键字添加样式以后会出现标签内容被显示的情况 代码思路: ...
特点: 1 自定义语法高亮,支持HTML, XML,... 8 使用标准的正则表达式搜索和替换 9 可以使用半透明模式,cool 10 快速放大、缩小页面,不用再设定字体大小 11 可以指定ESC键最小化Notepad2到系统托盘或者关闭Notepad2
1.一个RecyclerView或是listview或是其他可以显示多item的控件(主要的干货) 2.搞清楚EditText的实时监听 3.让一个textview出现不同的颜色 4.如何穿过Adpter找出textview中key值(也就是高亮字符串) 当你打通这...
本文实例为大家分享了Vue实现搜索结果高亮显示关键字的具体代码,供大家参考,具体内容如下 1. 需要解决的问题 父组件将搜索的字段传到子组件 子组件接受数据,正则匹配,并替换字段 2. 具体代码 父组件代码 ...
然而,它们却总是在你的开发过程中如影随形,不管是进行表单验证,还是高亮显示搜索结果,又或者是进行URL地址映射,总是需要使用它们。几乎所有的语言都对它进行了不同程度的支持,由此,足见其在文本匹配这一领域...
修复了一个BUG: 在部分系统中, 使用文字...8 使用标准的正则表达式搜索和替换 9 可以使用半透明模式,cool 10 快速放大、缩小页面,不用再设定字体大小 11 可以指定ESC键最小化Notepad2到系统托盘或者关闭Notepad2
在这种配置下我们要实现关键词不区分大小写搜索并高亮显示要借助ASP的正则处理了,请看下面代码: 代码如下:<% Function Takeout(patrn,string1,colors) ‘提取搜索关键字匹配文字 Dim regEx, Match, Matches...
8 使用标准的正则表达式搜索和替换 9 可以使用半透明模式,超酷! 10 快速放大、缩小页面,不用再设定字体大小 11 可以指定ESC键最小化Notepad2到系统托盘或者关闭Notepad2 12 体积小巧,绿色便携。
网上看到很多js实现的关键词高亮显示,方法都是一个道理,先获取要替换的文字区域,然后在用正则匹配到关键词,并进行替换。 react中实现起来似乎更简单一些。 我这里的需求是通过搜索框搜索出新闻列表,在已经获取...
8 使用标准的正则表达式搜索和替换 9 可以使用半透明模式,cool 10 快速放大、缩小页面,不用再设定字体大小 ■替换系统记事本的方法: ★如果你的系统是window XP或者windows 2000,那么请先关闭你的系统文件保护...