首页 > 其他 > 详细

类似于百度显示搜索结果时将关键字标红

时间:2018-07-15 18:15:10      阅读:458      评论:0      收藏:0      [点我收藏+]
/**
 * 渲染匹配的子串样式
 * @param  {[type]} str    [description]搜索结果
 * @param  {[type]} substr [description]搜索关键字 以空格隔开
 * @return {[type]}        [description]返回将搜索结果中的关键字标红的文本
 */
function renderMatchSubstring(str, substr)
{
	var substrList = substr.split(/\s+/);
	var regStr = "\(" + substrList.join("\)|\(") + "\)";
	var reg = new RegExp(regStr,"g");
	var matchResult = str.match(reg);
	for(index in matchResult)
	{
		var regS = new RegExp("[^</]\(" + matchResult[index] + "\)","g");
		str = str.replace(regS,"<span style=‘color:red;font-weight:bold‘>$1</span>");
	}
	return str;
}

 技术分享图片

关键在于 如果原文档是存在样式标签之类的需要避开 比如 原文本中含有  <p></p> 但是搜索的关键字 也有p 那么测试需要避开<p>以免样式错乱。本方法还未彻底完善。

类似于百度显示搜索结果时将关键字标红

原文:https://www.cnblogs.com/potatog/p/9314021.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!