仅将颜色应用于阵列的一部分？

Question

我将从other question为此重现一个数组：

console.log(arrayStr);

输出：

(a) - text1, (b) - text2, (c) - text3, (d) - text3

如何将颜色应用于(a) (b)等部位？

正则表达式为：/\([^)]+\)/g;

感谢。

Answer 1

要实现此目的，您可以扩展正则表达式以捕获组。然后，您可以使用它将(X)元素中匹配的span值包装到可以应用某些CSS的元素中。试试这个：

$('div').html(function(i, html) {
  return html.replace(/(\([^)]+\))/g, "<span>$1</span>");
})

span { color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>(a) - text1, (b) - text2, (c) - text3, (d) - text3</div>

这是一个本机JS实现：

var el = document.getElementById('foo');
el.innerHTML = el.innerHTML.replace(/(\([^)]+\))/g, "<span>$1</span>");

span { color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">(a) - text1, (b) - text2, (c) - text3, (d) - text3</div>