たとえば、次のような 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 などのキーワードのラッピングは完了しましたが、このコードを使用して clrscr() をラップできません ( https://stackoverflow.com/users/2684660/funkwurmから):
$('#board').children().each(function(index, child) {
var text = $(child).html();
text = text.replace(/(#include(\s*<.*>)?)/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);
});