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

假设这是标记：

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

您的预期输出是：

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

您可以使用 jQuery/javascript 来执行此操作，如下所示：

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

for(var i=0;i<textNodes.length;i++) {
    text = text + textNodes[i].text();
    $("#board").remove(textNodes[i]);
}

var spans = text.split("}");
var textToAppend = "";
for(i=0;i<spans.length - 1 ;i++)
    textToAppend = textToAppend + "<span>"+spans[i].split("{")[1]+"</span>";

$("#board").append(textToAppend);

这是您正在寻找的解决方案吗？

编辑1：

如果您只需要让我们说 b 为 2 和 d 为 4 的位置？

这是代码。

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

Answer 2

您想使用正则表达式：

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;

Answer 3

要使用 javascript 循环获得所需的结果：

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