Javascript 使用正则表达式在contenteditable div中包装条件块

contenteditable div id=“board\u code\u dup”

试一试

var stack=[]，regex1=/^（if | else | else\s+if）。*{$/，regex2=/^（if | else | else\s+if）。*$/，closing=/^$；
$（'#board_code_dup'）.children（）.each（function（））{
var$this=$（this），text=$.trim（$this.text（））；
if（regex1.test（文本））{
堆栈。取消移位（此）；
}else if（关闭测试（文本））{
$（stack.shift（））.nextUntil（this.addBack（）.add（this）.wrapAll（“”）
}else if（regex2.test（文本））{
$（this）.next（）.addBack（）.wrapAll（“”）
}
})

---

演示：

什么是

这不是javascript吗？你能创建一个jsfiddle@arunPJohny：在这里，我希望使用span class=“condBlock”包装条件块。是否可以实现这一点@extraRice也正如您所说，当前目标是不可能的，因为它跨越父元素。。。
cout<<"something";

if( a>b && b<c ){
 cout<<"hi";

 if( a==0 )
   cout<<"hello";
}

else if( a<b )
 cout<<"yow";

else{
 cout<<"not here";
 cout<<"sure";
}

cout<<"something";

if( a>b && b<c ) {
  cout<<"hi";

  if(a ==0 )
    cout<"hello";
}

if( a==0 )
       cout<<"hello";

else if( a<b )
     cout<<"yow";

   else{
     cout<<"not here";
     cout<<"sure";
    }

<div id = "board_code_dup">
  <div>cout<<"something";</div>
  <div><span class="condBlock">if(a>b && b<c ){</div>
  <div>cout<<"hi";</div>
  <div><span class="condBlock">if(a==0)</div>
  <div>cout<<"hello";</span></div>
  <div>}</span></div>
  <div><span class="condBlock">else if(a<b)</div>
  <div>cout<<"yow";</span></div>
  <div><span class="condBlock">else{</div>
  <div>cout<<"not here";</div>
  <div>cout<<"sure";</div>
  <div>}</span></div>
  <div>cout<<"something"</div>
</div>

text = text.replace(/(if[\s\S]*;)/g, '<span class="frag condBlock">$1</span>');

$('#board_code_dup').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(/(else(?!\s+if))/g, '<span class="frag cond">$1</span>');
                    text = text.replace(/([A-Za-z0-9_]+=[A-Za-z0-9_]+)/g, '<span class="frag">$1</span>');
                    text = text.replace(/(clrscr[^;]*;)/g, '<span class="frag">$1</span>');
                    text = text.replace(/(getch[^;]*;)/g, '<span class="frag">$1</span>');
                    text = text.replace(/(cout\s*(&lt;&lt;\s*[^;&]*\s*)*;)/g, '<span class="frag">$1</span>');
                    text = text.replace(/(cin\s*(&gt;&gt;\s*[^;&]*\s*)*;)/g, '<span class="frag">$1</span>');                                                                       
                    text = text.replace(/((int|char|float|bool)[^;]+;)/g, '<span class="frag">$1</span>');
                    text = text.replace(/(if[\s\S]*;)/g, '<span class="frag condBlock">$1</span>');

                    if(var_int.length>0){
                        var r1 = '\\b(' + var_int.join('|') + ')\\b';
                        var myRegex1 = new RegExp(r1, 'g');
                        text = text.replace(myRegex1, '<span class="frag">$1</span>');
                    }

                    if(var_char.length>0){
                        var r2 = '\\b(' + var_char.join('|') + ')\\b';
                        var myRegex2 = new RegExp(r2, 'g');
                        text = text.replace(myRegex2, '<span class="frag">$1</span>');
                    }

                    if(var_float.length>0){
                        var r3 = '\\b(' + var_float.join('|') + ')\\b';
                        var myRegex3 = new RegExp(r3, 'g');
                        text = text.replace(myRegex3, '<span class="frag">$1</span>');
                    }

                    if(var_bool.length>0){
                        var r4 = '\\b(' + var_bool.join('|') + ')\\b';
                        var myRegex4 = new RegExp(r4, 'g');
                        text = text.replace(myRegex4, '<span class="frag">$1</span>');
                    }

                    if(var_condSet.length>0){
                        var r4 = '\\b(' + var_condSet.join('|') + ')\\b';
                        var myRegex4 = new RegExp(r4, 'g');
                        text = text.replace(myRegex4, '<span class="frag">$1</span>');
                    }

                    $(child).html(text);

                });

var stack = [], regex1 = /^(if|else|else\s+if).*{$/, regex2 =  /^(if|else|else\s+if).*$/, closing = /^}$/;

$('#board_code_dup').children().each(function(){
    var $this = $(this), text = $.trim($this.text());

    if(regex1.test(text)){
        stack.unshift(this);
    } else if(closing.test(text)){
        $(stack.shift()).nextUntil(this).addBack().add(this).wrapAll('<div class="condBlock" />')
    } else if(regex2.test(text)){
        $(this).next().addBack().wrapAll('<div class="condBlock" />')
    }
})