当前位置: 首页 > Web前端 > HTML

常规规则:高亮多个相似关键词,比如京东、京东物流、京东商城……

时间:2023-04-02 17:01:03 HTML

最近在一个项目中遇到一个小需求,就是在一段文字中高亮几个关键词,例如下面的文字:京东(JD.com)是中国一家自营的B2C购物网站,其创始人刘强东是京东的CEO。旗下设有京东商城、京东金融、拍拍网、京东智能、O2O、海外事业部。2013年正式获得虚拟运营商牌照。2014年5月,正式在美国纳斯达克证券交易所上市(股票代码:JD)。2016年6月,与沃尔玛达成深度战略合作,1号店并入京东。2017年1月4日,中国银联宣布,京东金融旗下支付公司正式成为银联收单成员机构。2017年4月25日,京东集团宣布正式成立京东物流子集团。2017年8月3日,2017年“中国互联网企业100强”榜单出炉,京东排名第四。需要高亮的关键词:京东商城、京东、京东物流、京东集团最简单的方法就是使用正则表达式,像这样:functionaddKeyWordHighline(oText,keyWords){//oText->一段文字,keyWords->关键字数组varreturnVal=oText;for(vari=0;i'+keyWords[i]+'');}}returnreturnVal;}但这样做会造成两个问题:1.“京东物流”和“京东集团”无法高亮显示。2.重复添加高亮标签。“京东”关键字在“京东商城”后面,会导致文字“京东商城”变成京东商城改进思路(分别对应问题1和2):1、对关键字数组进行排序,长度较长的列在最前面,长度较长的优先突出显示。2.排除…区域。主要是通过在正则表达式中使用元字符?!pattern(正负预览)来实现的。Positivenegativelookahead:匹配任何不匹配模式的字符串开头的搜索字符串。这是一个非获取匹配,即匹配不需要获取以备后用。例如,“Windows(?!95|98|NT|2000)”可以匹配“Windows3.1”中的“Windows”,但不能匹配“Windows2000”中的“Windows”。修改后的代码:functionaddKeyWordHighline(oText,keyWords){varreturnVal=oText,i=0,wordReg;keyWords.sort(compareWordLength);for(i=0;i.[^<]*)'+keyWords[i]+'(?!.[^<]*<\/span>)','g');returnVal=returnVal.replace(wordReg,''+keyWords[i]+'');}}returnreturnVal;}functioncompareWordLength(a,b){if(a.length>b.length){return-1;}elseif(a.length