起因
昨天工作时遇到这样一种需求：将检索出来的字符串中的关键字标记成红色，关键字的个数是不定的。猛一看其实挺简单的，但我一时却没有想到太好的办法，因为并不是简单地将目标字符串替换成统一的字符串，而是对目标字符串进行一定的处理；而且说实话，在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 onclick="fun()">Click Me</button>
<span id="info">i'm alove higher man.loveseaManrch bugmAn</span>
</body>
</html>
