javascript - 条件ステートメントのすべての部分をグループ化する

Question

if 括弧内の条件付き stmt のすべての部分をグループ化するにはどうすればよいですか。contenteditable div からのテキストがあるとします。これは構文の強調表示以上のものです。コードの後半で処理するためにラップ テキストを使用します。

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

それに応じてグループ化し、このような配列に格納したいと思います

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>

これは私がcondFragmentコンテンツを使用して達成したいことです

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

アップデート

これに基づいてこれを解決する私の考えtextは次のとおりです。

1. && || を検索 ! 左から右へ
2. 見つかった場合は indexOF( && または || または !) を取得します
3. 見つかった && の左側が括弧で囲まれている場合、そこから && のインデックスまでスライスします
4. && の右側が開き括弧の場合、&& の後にスライスして最初に見つかった 2 番目まで)

しかし、それらがスライスすべき場所であることをどのように知ることができますか?