用 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

要匹配 #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 demo。您可能需要针对自己的用例调整正则表达式。

Answer 2

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

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