javascript - 用 span 包裹字符串

Question

例如，我的 contenteditable div 中有这样的文本：

<div id = "board">
    <div>#include<iostream.h></div>
    <div></div>
    <div>int main(){</div>
    <div>
        clrscr
           <span id="openParen">(</span>
           <span id="closeParen">)</span>     
        ;   
    </div>
    <div>return 0;</div>
    <div>}</div>
</div>

如果我看到一些关键字，它会换成span.

<div id = "board">
    <div><span class="fragment">#include<iostream.h></span></div>
    <div></div>
    <div>int <span class="fragment">main</span>(){</div>
    <div>
        <span class="fragment">
        clrscr
           <span id="openParen">(</span>
           <span id="closeParen">)</span>     
        ;
        </span>   
    </div>
    <div>return 0;</div>
    <div>}</div>
</div>

我已经完成了像 #include 和 main 这样的关键字的包装，但我无法使用此代码（来自https://stackoverflow.com/users/2684660/funkwurm ）包装 clrscr( )：

$('#board').children().each(function(index, child) {
   var text = $(child).html();
       text = text.replace(/(#include(\s*&lt;.*&gt;)?)/g, '<span class="frag">$1</span>');
       text = text.replace(/(main)/g, '<span class="frag">$1</span>');
       text = text.replace(/(clrscr)/gi, '<span class="frag">$1</span>');
       $(child).html(text);
});

Answer 1

jQuery 版本（非 CoffeeScript）工作jsFiddle

$('#board').children().each(function(index, child) {
    var text = $(child).html();
    text = text.replace(/(#include(\s*&lt;.*&gt;)?)/gi, '<span>$1</span>');
    text = text.replace(/(main\(.*\))/gi, '<span>$1</span>');
    $(child).html(text);
});

原来你不能text()像我在 dcro 的回答下建议的那样使用。

Answer 2

要匹配 #include、#include、main() 和 main(..some arguments..)，您可以遍历原始 div 的子项，并使用正则表达式对每一行进行匹配和替换：

text = child.html();
text = text.replace(/(#include(\s*&lt;.*&gt;)?)/gi, '<span>$1</span>');
text = text.replace(/(main\(.*\))/gi, '<span>$1</span>');
child.html(text);

查看JSFiddle 演示。您可能需要为自己的用例调整正则表达式。