js处理文章内容匹配关键词，关键词高亮显示效果的实现

js处理富文本框中关键词高亮效果展示

最近在处理舆情文章的数据，提及的需求中涉及舆情要素以及公司名称需要在文章内容中高亮显示，以下方法使用js处理文章实现关键词的高亮显示

1、展示实现效果

由上图可看到，企业名称和舆情要素在舆情内容中实现了黄色高亮显示

2、js方法实现过程

	function showYuqingDetailInfo(id){
		$.post("<%=basePath%>/yuQing/getYuQingInfo",{
			"id":id},
			function(data){
				 $('#fm').form('load',data);
	             var fyqXwContent = data.fyqXwContent;
	             document.getElementById("fyqYwDom").href=data.fyqYwDom;
	             $('#fyqYwDomfont').html(data.fyqYwDom);
	             
	             var fyqYqElement = data.fyqYqElement;//舆情要素
	             var entname = data.entname;//企业名称
	             var lastReplace = fyqXwContent;
	             
	             if(entname!= null&&entname.trim()!=""){
	            	 if(lastReplace.indexOf(entname)>0){
	            		 lastReplace = lastReplace.replace(eval("/"+entname+"/g"),"<span style='background-color: yellow;color:red'>"+entname+"</span>");
	            	 }
	            	 editor.html(lastReplace);
	             }
	             
	             if(fyqYqElement!=null&&fyqYqElement.trim()!=""){
	            	 if(fyqYqElement.indexOf(",") > 0){
		            	 var strs = fyqYqElement.split(",");
		            	 for(var i = 0; i < strs.length; i++){
		            		 lastReplace=lastReplace.replace(eval("/"+strs[i]+"/g"),"<span style='background-color: yellow;color:red'>"+strs[i]+"</span>");
		            	 }
		             } else{
		            	 lastReplace = lastReplace.replace(eval("/"+fyqYqElement+"/g"),"<span style='background-color: yellow;color:red'>"+fyqYqElement+"</span>");
		             }
	            	 editor.html(lastReplace);
	             }
	             
	             if((fyqYqElement==null||fyqYqElement.trim()=="")&&(entname==null||entname.trim()=="")){
	            	 editor.html(fyqXwContent);
	             }
		})

	}

在该js方法中，首先使用ajax调用后台查询方法获取数据返回到页面，给各个栏位赋值

原文地址栏位赋值过程，jsp中为

<a id="fyqYwDom" href="" target="_blank" style='text-decoration: underline;'><font id="fyqYwDomfont"></font></a>

首先给href赋值，然后给font标签赋值，否则页面不显示相关要素；

然后，从data中获取企业名称以及舆情要素的值，为了避免变量重复使用引起的干扰，引入lastReplace变量，进行文章内容的处理过程，eval函数的使用时引入"/   /g",进行这样的处理后，可进行文章全文的匹配检索，否则只处理一个，则不再进行替换工作，在处理舆情要素的过程中涉及多个舆情要素的情况，故使用字符数组，进行了遍历替换，处理完后使用富文本赋值方式实现文章内容赋值展示。