如何用JavaScript突出显示小写字母？

Question

对于像这样的段落

<p> This is an exaMPLe </p>

如何使用Javascript突出显示不同颜色的小写字母？

Answer 1

使用正则表达式查找/替换这是一个快速而肮脏的解决方案。

var p = document.querySelector("p");
var html = p.innerHTML;

html = html.replace(/([a-z]+)/g, "<strong>$1</strong>");

p.innerHTML = html;

首先，你得到段落，阅读它的内部HTML。然后使用正则表达式查找小写的a-z字母并用strong HTML标记包装它们。您也可以使用span并根据需要应用CSS类。在正则表达式查找/替换后，设置回HTML值。

工作示例：http://jsbin.com/vodevutage/1/edit?html,js,console,output

修改： 如果您希望使用不同的颜色，请按如下所示更改一行：

html = html.replace(/([a-z]+)/g, "<span class='highlight'>$1</span>");

并定义一个CSS类，如下所示：

.highlight {
    background-color: yellow;
}