如何使用CSS和JavaScript修改括号内文字的字体颜色？

嘿，我来帮你搞定这个需求！想把括号里的“newbi”改成红色或者其他颜色，用CSS和JavaScript都能实现，我给你分两种方案详细说说：

如果你的文本是固定写在HTML里的，最简单的方式就是给目标文字套一个行内元素，再用CSS指定颜色：

1. 先修改你的HTML，把“newbi”用<span>标签包裹，并给它加一个类名：

我是一名<span class="highlight-text">newbi</span>程序员

2. 然后在CSS里给这个类设置颜色：

.highlight-text {
  color: red; /* 这里可以换成你想要的任何颜色，比如#ff4500（橙红色）、blue都可以 */
  /* 还可以加其他样式，比如font-weight: bold;让文字更突出 */
}

这种方法的好处是代码简洁，样式和结构分离，后期想改颜色直接改CSS就行，不会动HTML内容。

如果你的文本是动态生成的，或者你不想手动修改原始HTML，可以用JS来自动找到目标文字并添加样式：

情况1：只替换特定的“[newbi]” #

假设你的文本在一个id为content的元素里（比如<p id="content">我是一名[newbi]程序员</p>），可以用这段代码：

// 获取包含目标文本的元素
const targetElement = document.getElementById('content');
// 用正则匹配[newbi]，替换成带颜色的span标签
targetElement.innerHTML = targetElement.innerHTML.replace(/\[newbi\]/g, '<span style="color: red;">newbi</span>');

情况2：替换所有括号里的内容（如果需要的话） #

如果你想让所有类似[xxx]格式的文字都变色，可以把正则改成匹配任意括号内容：

targetElement.innerHTML = targetElement.innerHTML.replace(/\[([^\]]+)\]/g, '<span style="color: red;">$1</span>');

这里的$1会自动替换成括号里的内容，比如[test]会变成<span style="color: red;">test</span>。

小提示 #

• 如果你的页面加载完成后才会生成目标文本，记得把JS代码放在DOMContentLoaded事件里，确保元素已经存在：

document.addEventListener('DOMContentLoaded', function() {
  // 上面的替换代码放在这里
});

两种方案各有优势：静态内容优先用CSS，维护起来更省心；动态场景或者无法修改HTML时，JS方案更灵活。

内容的提问来源于stack exchange，提问作者Iqbal