起因



昨天工作时遇到这样一种需求：将检索出来的字符串中的关键字标记成红色，关键字的个数是不定的。猛一看其实挺简单的，但我一时却没有想到太好的办法，因为并不是简单地将目标字符串替换成统一的字符串，而是对目标字符串进行一定的处理；而且说实话，在Java中用正则表达式的时候还真不多，所以对正则表达式一直是似懂非懂，但我相信正则肯定能解决，而且应该很简单。

带着这样一种信心查阅了一下JDK的API，觉得还真是挺简单，至少不止一种解决方式。



Java中的实现



其实问题就在于我们如何获取正则匹配到的字符串，然后做一下处理再拼接回原串就可以了。比如我们拿到了匹配字符串subStr，将其用span标签包起来：

"<span style='color: red;'>" + subStr + "</span>"



那么我们如何获得正则表达式匹配到的字符串呢？这应该和我们编写的正则表达式相关，因为关键字的个数是不定的，那么我们可以将每一个关键字作为表达式对原字符串作相应处理，当一个关键字匹配处理结束后再进行下一个关键字的操作，直至结束：

public String signKeywordToRed (String content, String [] keywords) {
	StringBuffer stringBuffer = new StringBuffer();
	for(String keyword : keywords) {
		if (!StringUtils.isEmpty(keyword)) {
			Matcher matcher = Pattern.compile(keyword, Pattern.CASE_INSENSITIVE).matcher(content);
			while(matcher.find()) {
				matcher.appendReplacement(stringBuffer, "<span style='color: red;'>" + matcher.group(0) + "</span>");
			}
			matcher.appendTail(stringBuffer);
		}
		content = stringBuffer.toString();
		stringBuffer.delete(0, stringBuffer.length());
	}
	return content;
}



因为在正则表达式分组中，组0始终代表的是整个表达式，所以我们可以用group(0)取得正则（即关键字）匹配到的字符串；除了group(0)方式取得匹配字符串外，还可以用截取字符串的方式来取得匹配字符串，比如可以这样做：

matcher.appendReplacement(resultBuffer, "<span style='color: red;'>" + content.substring(matcher.start(), matcher.end()) + "</span>");



其中Matcher对象的start()方法和end()方法分别返回匹配字符串的开始索引和结束索引；另外Pattern.compile()方法中的第二个参数Pattern.CASE_INSENSITIVE表示不区分大小写。

除了上述方法，我们应该还能想到另外一种方式：即将所有的关键字组合成一个正则表达式，只编译一次表达式即可。比如我们有两个关键字man和love，我们的正则可以这样写：(man|love)，那么在关键字个数不定的情况 下我们就可以这样做：

public String signKeywordToRed(String content, String [] keywords) {
	StringBuffer regExp = new StringBuffer("("); 
	for(String keyword : keywords) {
		regExp.append(keyword).append("|");
	}
	regExp.deleteCharAt(regExp.length() - 1).append(")");
	
	Matcher matcher = Pattern.compile(regExp.toString(), Pattern.CASE_INSENSITIVE).matcher(content);
	StringBuffer resultBuffer = new StringBuffer();
	while(matcher.find()) {
		matcher.appendReplacement(resultBuffer, "<span style='color: red;'>" + matcher.group(1) + "</span>");
	}
	matcher.appendTail(resultBuffer);
	
	return resultBuffer.toString();
}



在这个例子中，其实上面的group(1)换成group(0)也是可以的。



Javascript中的实现



将需求实现之后，突然想到这种问题放在JS中应该更简单，因为Javascript灵活性是Java这种比较严谨的语言难以企及的。于是着手试了一下，果然很简单，仅需几行代码就可以了，如下所示：

function signKeywordToRed(content, keywords) {
	var regExp = new RegExp("(" + keywords.join("|") + ")", 'gi');
	return content.replace(regExp, "<span style='color: red;'>$1</span>");
}



在这里$1与Java中的group(1)原理是一样的，都是正则表达式第一个分组所匹配到的字符串。需要注意的是这里假定传进方法的参数keywords是数组，这里只是个小例子，如果需要处理更严谨的话，需要判断一下是否为数组。

下面贴个小例子：

<html>
	<head>
		<script type="text/javascript">
			function fun() {
				var kw = prompt('请输入要标记为红色的词语, 多个词语之间用逗号分隔.');

				var target = document.getElementById('info');
				target.innerHTML = signKeywordToRed(target.innerText, kw.split(','));
			}
			
			function signKeywordToRed(content, keywords) {
				var regExp = new RegExp("(" + keywords.join("|") + ")", 'gi');
				return content.replace(regExp, "<span style='color: red;'>$1</span>");
			}
		</script>
	</head>
	<body>
		<button οnclick="fun()">Click Me</button>
		<span id="info">i'm alove higher man.loveseaManrch bugmAn</span>
	</body>
</html>



Javascript中String对象的replace()方法是个很强大的方法，需要好好研究一番。