1. 程式人生 > >使用正則表示式對文章關鍵字做高亮度顯示

使用正則表示式對文章關鍵字做高亮度顯示

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>test3_2</title>
		<style type="text/css">
			#content {
				width: 700px;
				height: auto;
				margin: 20px auto;
				border: 1px solid #A52A2A;
			}
			
			#content p {
				text-indent: 2em;
				line-height: 20px;
			}
		</style>
	</head>

	<body onload="loadp();">
		<div id="content">
			<h2>試點急診先治療後結賬</h2>
			<p id="word">衛生部醫政司副局長趙明鋼說,過去,門診, 急診病人就診,每個診療專案要逐一繳費, 增加了排隊等候的時間,同時由於排隊繳費 人員過多 影響了醫院急診秩序,他說:試點 “門診急診先治療後結算”,要重新調整門診 ,急診就診療程。 衛生部醫政司副局長趙明 鋼說,過去,門診,急診病人就診,每個診 療專案要逐一繳費,增加了排隊等候的時間, 同時由於排隊繳費人員過多 影響了醫院急診 秩序,他說:試點 “門診急診先治療後結算” ,要重新調整門診,急診就診療程。 衛生部醫 政司副局長趙明鋼說,過去,門診,急診病人 就診,每個診療專案要逐一繳費,增加了排隊 等候的時間,同時由於排隊繳費人員過多 影響 了醫院急診秩序,他說:試點 “門診急診先治療 後結算”,要重新調整門診,急診就診療程。
			</p>
		</div>
	</body>

</html>

<script type="text/javascript">
	function loadp() {
		//單一修改
		//		var keyword = "急診";
		//		var wordkey = keyword.split(",");
		//		var regExp = new RegExp(wordkey[0],"gi");
		//		word = word.replace(regExp,wordkey[0].style.color='red');
		//		document.getElementById("word").innerHTML = word;
		//		var html = document.getElementById("content").innerHTML;
		//		while(html.findText("急診")) {
		//			html = html.replace("急診", "<font style='color:red'>" + "急診" + "</font>");	
		//			rng.pasteHTML(rng.text.fontcolor('red'));
		//		}
		//		document.getElementById("content").innerHTML = html;
		function SearchHighlight(idVal, keyword) {
			var pucl = document.getElementById(idVal);
			if("" == keyword) return;
			var temp = pucl.innerHTML;
			var htmlReg = new RegExp("\<.*?\>", "i");
			var arrA = new Array();
			//替換HTML標籤 
			for(var i = 0; true; i++) {
				var m = htmlReg.exec(temp);
				if(m) {
					arrA[i] = m;
				} else {
					break;
				}
				temp = temp.replace(m, "{[(" + i + ")]}");
			}
			words = unescape(keyword.replace(/\+/g, ' ')).split(/\s+/);
			//替換關鍵字 
			for(w = 0; w < words.length; w++) {
				var r = new RegExp("(" + words[w].replace(/[(){}.+*?^$|\\\[\]]/g, "\\$&") + ")", "ig");
				temp = temp.replace(r, "<b style='color:Red;'>$1</b>");
			}
			//恢復HTML標籤 
			for(var i = 0; i < arrA.length; i++) {
				temp = temp.replace("{[(" + i + ")]}", arrA[i]);
			}
			pucl.innerHTML = temp;
		}
		SearchHighlight("content", "急診");
	}
</script>
<img src="https://img-blog.csdn.net/20160826104215393?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />