JavaScriptの正規表現で、「一番外側の括弧」で抽出したい

Question

###実現したいこと
正規表現について知りたいです。宜しくお願い致します。

このようなvalueがあります。
<input type="textarea" value="[いぬ[の] しっぽ] [ねこのしっぽ]いぬ ねこ ">

ここから、下記➀➁の配列を取得することは可能でしょうか？

###取得したい配列
➀「一番外側の括弧」という単位で配列
Array [ "いぬ[の] しっぽ", "ねこのしっぽ" ]

➁それ以外の文字列でスペース単位の配列
Array [ "いぬ", "ねこ" ]

###注意したい点
・括弧の入れ子の数は不明です。

・括弧は必ずセットになります。（たとえば[いぬ[の]] しっぽ]のように括弧がセットにならないということはありません。）

###試したこと
なんとなく大枠の流れはできたのですが、やはり正規表現の部分で躓いています。
下記ですと「一番外側の括弧」ではなく「括弧が出現するたびに」という感じになってしまいます。

どうすればいいか教えて頂けませんでしょうか。

<input type="textarea" value="[いぬ[の] しっぽ] [ねこのしっぽ]いぬ ねこ ">

$('input').on('input', function() {
	
	// 入力値を取得
	const inputVal = $(this).val();
  
	// ➀「一番外側の括弧」という単位で配列
	const range = /[([^[]　]+)/g; // ここで「一番外側の括弧」という指定がしたい
	let match;
	let rangeArr = [];
	while ( (match = range.exec(inputVal))!== null ) {
		rangeArr.push(match[1]);
	}
	console.log( 'rangeArr' );
	console.log( rangeArr );

	// ➁それ以外の文字列でスペース単位の配列
	const spaceArr = inputVal.replace(range,'').split(/[\u3000&\x20;]/g);  
	console.log( 'spaceArr' );  
	console.log( spaceArr );  

});

Answer 1

正規化された文字列には見えないので、正規表現でやるのは厳しいんじゃないでしょうか……

let blankets = [];
let counter = 0;
let source = "[いぬ[の] しっぽ] [ねこのしっぽ]いぬ ねこ ";

source.split('').forEach(char => {
  if(char === ']') {
    counter--;
  }
  if(char === '[') {
    counter++;
    if(counter === 1) {
      blankets.push('');
      return; // continue
    }
  }
  if(counter > 0) blankets[blankets.length - 1] += char;
});

let temp = source;
blankets.forEach(str => temp = temp.replace(`[${str}]`, ''));
let spaces = temp.trim().split(' ');

console.log(blankets);
// -> (2) ["いぬ[の] しっぽ", "ねこのしっぽ"]
console.log(spaces);
// -> (2) ["いぬ", "ねこ"]

Comments

[kamekamekame]

入れ子の数が悩みどころでしたが、カウンターとは！巧いですね。勉強になりました。キモな機能だったのでかなり助かります。どうもありがとうございました！

Answer 2

以下、未検証です。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions

while (tokenGroup = /([^[]+)|[([^]]*)]/g.exec(string)) {
  const tokenList = tokenGroup.split(' ');
}

---

質問を誤読していました。
対応する括弧を取得したかったのですね。
https://teratail.com/questions/156083#reply-234347
https://gist.github.com/think49/071350bcc987d82dd836885ea6f5c0d4

Re: kamekamekame さん

Comments

[kamekamekame]

ありがとうございます。仰ることがわかっていないせいか、できないようでした。
ですがリンク先やexecというメソッドについてありがとうございます。引き続き考えてみます。

[think49]

すみません。質問を誤読していました。
履歴から気がついたようですが、同案件の過去回答へのリンクを貼っておきました。

[kamekamekame]

ありがとうございます。仰るようにあなたのご回答履歴を漁り笑、そちらにあったgithubを使わせて頂きました。
その後thyda.eiqau様からのご回答もあり、いずれの方法でもできることが確認できまして、その贅沢さにいささか恐縮しております。m(__)m

ところでお二方のコードですが、正規表現を使っているかどうかの違いで、やっていることは同じですよね。
いまいちわからないのですが、正規表現を使うことについてはどのようなメリットがあるのでしょうか？