Javascript | 'あ●い▲う'などの文字列をsplitなど用いて区切り文字も含めた配列にしたい。

Question

現状(1)

const str = 'あああ■いいい■ううう■えええ■おおお';
arr = str.split('■');
console.log(array); // ['あああ','いいい','ううう','えええ','おおお']

第一ステージとして、以下のような配列を期待しているので

['あああ','■','いいい','■','ううう','■','えええ','■','おおお'];

以下の解放を作りました。

const str = 'あああ■いいい■ううう■えええ■おおお'
const splitString = '■'
const arr = str.split(splitString);
arr.forEach(function(element,index) {
  if (index%2 == 0){
     return
  }
  arr[index] = '■'
});

今回したいこと。

以下にあるような配列を期待したいのですが、なかなか解法が浮かびません。

const str = 'あああ■いいい▲ううう■えええ▲おおお';
const arr = str.split(/■|▲/);
console.log(arr); // [ 'あああ', 'いいい', 'ううう', 'えええ', 'おおお' ]

//// 何らかの処理...

////////////// 期待する配列 /////////////////
console.log(arr); // ['あああ', '■', 'いいい', '▲', 'ううう', '■', 'えええ', '▲', 'おおお'];

もし実装が可能な方いらっしゃったらご教授、助言などいただけると幸いです。
また現状(1)のコードのアドバイス等も頂けると幸いです。よろしくお願いします。

Comments

[kei344]

予想するくらいなら別質問にすればよいのでは。例示する文字列やコードは実際使用するものと同じ物を用意したほうが良いですよ。

[退会済みユーザー]

やはりそうしますね、ありがとうございます！
手が空いた際にコメントやベストアンサーの決定などさせていただきます！

Answer 1

こんな感じでしょうか?

console.log('あああ■いいい▲ううう■えええ▲おおお'.split(/([■|▲]+)/));
// => [ 'あああ', '■', 'いいい', '▲', 'ううう', '■', 'えええ', '▲', 'おおお' ]

参考: 正規表現でマッチした要素を残しつつsplitしたい - DRYな備忘録

Comments

[Lhankor_Mhy]

うわ、これ知らなかったです……なるほど……

> separator が、キャプチャする括弧を含む正規表現だった場合、マッチしたキャプチャする括弧の結果（任意の undefined となった結果を含む）である各回の区切りが出力配列に結合されます。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/split#Description

[m.ts10806]

これは便利

[miyabi_pudding]

すごいこれは

[miyabi-sun]

お前がNo.1だ……

[退会済みユーザー]

ありがとうございます...こんな1行でできるなんて...
正規表現について確認させていただけないでしょうか、

/ ... / 正規表現の始まり終わり
( ) キャプチャ
[ ... | ... ] OR

は多分認識はあってると思うのですが、

+ は直前の文字(または文字列)の１回以上の繰り返しという意味でしょうか。

Answer 2

  const str = 'あああ■いいい▲ううう■えええ▲おおお';
  str.match(/■|▲|.+?(?=[■|▲])|.+/g);

/*
あああ,■,いいい,▲,ううう,■,えええ,▲,おおお
*/

Answer 3

「こうしたらできるのではないか」という考え方だけの回答です。
区切り文字の前後に区切り文字を含まない同じ文字列（１字よりも記号など組み合わせた方が良い）を投入し（正規表現を使った置換で良いと思います）、その文字列でsplit

※その投入する文字列群を事前に別の文字列に変換する処理を入れて、split後に戻すような対応まで出来ればなおよし

Answer 4

以下の解放を作りました

これ動かしたら(5) ["あああ", "■", "ううう", "■", "おおお"]になって、
いいいとえええの文字列が剥げるやん。
新しく空の配列を1個用意して、交互にpushしていくというやり方にしないと駄目だよ。

---

もうLhankor_Mhyさんとredshogaさんの回答には勝てないので
質問文のコードの考え方を元に無理やり改造して解いてみたよ。
これは中々に死ねるけど、中々綺麗なコードになったかも。

const str = 'あああ■いいい▲ううう■えええ▲おおお';

// 対象の文字を配列にしてreduceでくくる
// アロー関数使ってなかったのでES5でコードを書いた
['■', '▲'].reduce(function (strs, splitString) {
  var results = [];
  strs.forEach(function (str) {
    str.split(splitString).forEach(function(it, i){
      if (i !== 0) results.push(splitString);
      results.push(it);
    });
  });
  return results;
}, [str]);
// (9) ["あああ", "■", "いいい", "▲", "ううう", "■", "えええ", "▲", "おおお"]

こんな感じでreduceの開始を[str]にするのが拘りポイント、
後は一時的に二次元配列を作って、一次元配列に固め直すというやり方で解決できる。

Answer 5

正規表現でマッチした要素を残しつつsplitしたい - DRYな備忘録

上記エントリーを参考に下記でいかがでしょうか。
（エントリーの丸パクリです）

const str = 'あああ■いいい▲ううう■えええ▲おおお';

const rule = /[■|▲]+/g;

let copy = str;

const arr = [];

src.match(rule).forEach(function(m) {
    const i = copy.indexOf(m);
    if (i != 0) {
      arr.push(copy.slice(0, i - 1)); // マッチじゃない部分をpush
    }
    arr.push(copy.slice(i, i + m.length)); // マッチな部分をpush
    copy = copy.slice(i + m.length); // pushした部分を削る
});
if (copy.length != 0) {
  arr.push(copy); // ケツに残りカスがあればpush
}
console.log(arr);