Question

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

我已经通过首先包装所有char来进行比较，然后比较它是{或}。但是这太慢了，我需要反转过程，是否有可能获得相对于父div的char位置？

预期输出

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

如何使用包含（）和替换（）？

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次，则可以添加＆＃34; g＆＃34;到正则表达式：

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

在元素中找到{或}并用span包装它们

3 个答案: