javascript - 在元素内查找 { 或 } 并用 span 包裹它们

Question

<div id = "board>
    <div>{abc</div>
    <div>def</div>
    <div>ghi}</div>
</div>

我已经通过在比较它是否是 { 或 } 之前先跨度包装所有字符来完成此操作。但这太慢了，我需要反转该过程，是否可以获取相对于父 div 的 char 位置？

预期输出是

<div id = "board>
    <div><span>{</span>abc</div>
    <div>def</div>
    <div>ghi<span>}</span></div>
</div>

使用contains()和replace()怎么样？

Answer 1

您想要使用正则表达式:

var x = '<div id = "board>' + 
    '<div>{abc</div>' +
    '<div>def</div>' +
    '<div>ghi}</div>' +
    '</div>'; // or... get element by id 'board'

var rgx1 = /{/;
var rgx2 = /}/;

var y = x.replace(rgx1, "<span>{</span>");
y = y.replace(rgx2, "<span>}</span>");

如果您认为 { 或 } 出现超过 1 次，您可以将“g”添加到正则表达式中:

var rgx1 = /{/g;
var rgx2 = /}/g;