Question

contenteditable div id =“board_code_dup”

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";

我想包装条件块：

1

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

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

2

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

3

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

4

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

目标HTML将是这样的：

<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>

问题实现我的condBlock包装的正确正则表达式是什么？

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

实施这是我的实际代码，其他包装已经成功，例如将cout<<"something"，cin>>variable and (b>a)，( (a>b) && (a<b) )包装为条件片段

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

                });

Answer 1

尝试

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" />')
    }
})

演示：Fiddle

使用正则表达式在可信任的div中包装条件块

1 个答案: