Javascript 在元素中找到{或}，并用span将它们包装起来 {abc def ghi}

使用包含（）和替换（）怎么样？

假设这是标记：

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

{abc
def
ghi}

您的预期输出是：

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

abcdefghi

您可以使用jQuery/javascript这样做：

<div id="board">
    <span>abcdefghi</span>
</div>

var textNodes=$（“#board”）.find（“div”）；
var text=“”；
对于（var i=0；i您希望使用正则表达式：

var textNodes = $("#board").find("div");
var text = "";

for(var i=0;i<textNodes.length;i++) {
    text = text + textNodes[i].text();        
}

var codeBlocks = text.split("}");
var firstBlock = codeBlocks[0];

var getCharPosInBlock = function (character) {
     if(character === "}") return firstBlock.length;
     return firstBlock.indexOf(character);
}

要使用javascript循环获得所需结果，请执行以下操作：

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

var textNodes=$（“#board”）.find（“div”）；
对于（变量i=0；i 0）
textNodes[i].text（value.replace（“{”，“{”））；
if（value.indexOf（“}”）>0
textNodes[i].text（value.replace（“{，“}”）；
}
您的意思是像素位置？？您能进一步解释一下您想要实现的目标吗？不，不是像素位置，类似于偏移量，例如我期望的“b”的位置是2（基于0）这将用于我的代码编辑器上的大括号匹配。我需要span以便我可以突出显示它们为什么不直接替换它们？大帮助，将其作为答案再次发布，以便我可以标记它（为了其他人的利益）。您有这方面的演示吗，因为我的没有附加到$（'board'）如果dom是用javascript创建并附加的，字符串正则表达式匹配是最快的选项。如果dom已经存在，并且我们正在修改同一个dom来进行高亮显示，我们将不得不删除dom，进行更改并重新添加。这将触发重绘，并且速度会变慢。下面是一个小提琴来展示这一点：
var textNodes = $("#board").find("div");
var text = "";

for(var i=0;i<textNodes.length;i++) {
    text = text + textNodes[i].text();        
}

var codeBlocks = text.split("}");
var firstBlock = codeBlocks[0];

var getCharPosInBlock = function (character) {
     if(character === "}") return firstBlock.length;
     return firstBlock.indexOf(character);
}

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>");

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

var textNodes = $("#board").find("div");

for(var i=0;i<textNodes.length;i++) {
    var value = textNodes[i].text()
    if(value.indexOf("{") > 0) 
         textNodes[i].text(value.replace("{", "<span>{</span>"));
    if(value.indexOf("}") > 0) 
         textNodes[i].text(value.replace("{", "<span>}</span>"));
}