用跨度包裹字符串

例如，我的contenteditablediv中有一个文本，如下所示：

<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等关键字的包装，但我无法使用以下代码包装clrscr（）（来自https://stackoverflow.com/users/2684660/funkwurm)：

$('#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);
});

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()。

要匹配#include、#include，main（）和main（..一些参数..），您可以遍历原始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演示。您可能需要根据自己的用例调整正则表达式。

相关内容

最新更新

热门标签：