jsは文章の内容を処理してキーワードに一致して、キーワードの高亮は効果の実現を表示します.

2832 ワード

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"は、このような処理を行った後、文章の全文のマッチング検索ができます.そうでなければ、一つだけ処理すれば、もはや代替作業を行いません.地理的要素を処理する過程で、複数の地理的要素が関与しているため、文字配列を使用して、遍歴的に置換し、処理が終わったらテキストリッチ方式を使用して文章の内容の割当展示を実現します.