Javascript 将每条条件语句分组

如何将每个条件stmt分组到if括号内。假设我有一个contenteditable div中的文本。这不仅仅是语法高亮显示，我将在代码后面使用换行文本进行处理

text = if ( x==1 && (x>2 || (!x>2 || x<=0)) )

更新

我根据

文本解决这个问题的想法是：

搜索&&| |！从左到右
如果找到一个，则获取indexOF（&&或| |或！）
如果找到的&&的左侧被paren包围，则从那里将其切片到索引&&
如果&&的右侧是一个开放的paren，则在&&之后进行切片，直到找到第一个（第二个）
但是我怎么知道这些是我应该切片的地方呢？
在这种情况下，最好使用完整的javascript解析器

看一看

这个项目包括一个完整的JS解析器。
在这种情况下，最好使用一个完整的javascript解析器

看一看

这个项目包括一个完整的JS解析器。
Offtopic:有很多语法高亮显示，你想重新创建轮子吗？@未定义，不仅仅是语法高亮显示，我将在以后使用换行文本进行评估Offtopic:有很多语法高亮显示，你想重新创建轮子吗？@未定义，不仅仅是语法高亮显示，稍后我将使用包装文本进行评估。我不知道如何使用github，这里的新手学习如何使用github和现有库所花费的时间和精力要比尝试创建自己的解析器所花费的时间和精力少得多。这可能需要你一年的时间，也可能是马车。另一方面，UglifyJS已经被数百万人证明工作得非常好。不知道如何使用github，这里的新手学习如何使用github和现有库要比尝试创建自己的解析器花费更少的时间和精力。这可能需要你一年的时间，也可能是马车。另一方面，数以百万计的人已经证明，UglifyJS确实工作得很好。
condFragment[0]=('x==1 && (x>2 || (!x>2 || x<=0))');
condFragment[1]=('x==1');
condFragment[2]=('(x>2 || (!x>2 || x<=0))');
condFragment[3]=('x>2');
condFragment[4]=('(!x>2 || x<=0)');
condFragment[5]=('!x>2');
condFragment[6]=('x>2');
condFragment[7]=('x<=0');

<div id="board">
     <div>int main(){</div>
     <div></div>
     <div>if(x==1 && !x>2)</div>
     <div>statement;</div>
     <div>while(!x>5){</div>
     <div>statement;}</div>
     <div>}</div>
</div>

<div id="board">
     <div>int main(){</div>
     <div></div>
     <div>
     if(<span class="frag"><span class="frag">x==1</span> && 
     <span class="frag">!<span class="frag">x>2</span></span></span>)
     </div>
     <div>statement;</div>
     <div>while(!x>5){</div>
     <div>statement;}</div>
     <div>}</div>
</div>