1

たとえば、次のような 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*&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);
});
4

2 に答える 2

1

#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のデモをご覧ください。おそらく、独自のユースケースに合わせて正規表現を調整する必要があります。

于 2013-08-30T17:07:41.470 に答える