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

How to highlight lowercase letters with JavaScript?

本文关键字：显示 小写字 何使用 JavaScript      更新时间：2023-09-26

对于这样的段落

<p> This is an exaMPLe </p>

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

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

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;
}
相关文章：