JavaScript: 文字列から多次元配列を生成するには？

Question

JavaScript の質問です。

次の文字列のデータ captions があるとします。

時刻と文字が繰り返し現れるデータです。

let cartions = "3 - My nail, 6 is very big. 11 (lively music) 26 - Konnichiwa everyone? 27 - Konnichiwa. 29 - Oh Japan. 32 - I wanna scream. 33 May I? 35 (screams) 43 - Oh that's Japanese. 45 I know it. 49 - Oh. 50 - Oh it smells good. 53 (mumbles) 56 - Yum. 58 (mumbles) 65 - Spicy. 70 - I wonder why they make it"

この captions を、JavaScript で以下の多次元配列に変換しるには、どうすればいいでしょうか？

[["3", "- My nail,"], 
 ["6", "is very big."],
 ["11", "(lively music)"],
 ["26", "- Konnichiwa everyone?"],
 ["27","Oh Japan."],
 ["29","- I wanna scream."],
 ["32","May I?"],
 ["35","(screams)"],
 ["43","- Oh that's Japanese."],
 ["45","I know it."],
 ["49","- Spicy."],
 ["56","- Yum."],
 ["58","(mumbles)"],
 ["65","- Spicy."],
 ["70","- I wonder why they make it"],
]

ご助言、よろしくお願い致します。

Comments

[hentaiman]

うまくいかないのは処理のどの部分ですか？

[yambejp]

一行目の配列がとじてません

[miyabi_pudding]

もうすでに正答がいくつも出ておりますが、
まずは、自身でどこまで調べて、やって、ここがうまく行かなかった、などを記載し、
丸投げにならないようにならないようにしましょう。

Answer 1

こんにちは。一例を挙げます。

captions.split(/(?=\b\d)/).map(str => /^(\d+)\s+(.+[^\s]+)/.exec(str).slice(1));

• 動作確認用CodePen: https://codepen.io/jun68ykt/pen/abdJGyP?editors=0012

補足

上記のコードによって、ご質問にある captions は、意図通りの二次元配列に分割されます。ただし検討事項として、ご質問にある

時刻と文字が繰り返し現れるデータ

の「文字」の部分に属すと思われる数字があっても、それも「時刻」とみて区切ってしまいます。たとえば、ご質問にある captions には

11 (lively music)

が含まれていますが、これが以下

11 (lively 10 musics)

だったりすると、分割によって

[ '11', '(lively 10 musics)' ]

になって欲しいものと思いますが、上記のコードだと、以下のような時刻と文字の組が二つあるものとして分割されます。

[ '11', '(lively' ], [ '10', 'musics)' ]

Comments

[t-cool]

ご助言、ありがとうございました！

[jun68ykt]

どういたしまして???? 参考になれば幸いです。

Answer 2

String.prototype.splitの引数に正規表現オブジェクトを渡せばうまくいきそうです。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/split
の「RegExp で分割して結果に区切り文字列の一部を含める」のセクションをどうぞ。

const content = "1 あ 22 い 333 う";

const words = content.split(/([0-9]+)/).slice(1);
for (let i = 0; i < words.length; i += 2) {
    console.log([words[i], words[i + 1]]);
}

/*
[ '1', ' あ ' ]
[ '22', ' い ' ]
[ '333', ' う' ]
*/

Comments

[t-cool]

ご助言、ありがとうございました！

Answer 3

どこまでの処理が必要かわりませんがこんな感じ

• code pen : multi divide

Comments

[yambejp]

let cartions = "3 - My nail, 6 is very big. 11 (lively music) 26 - Konnichiwa everyone? 27 - Konnichiwa. 29 - Oh Japan. 32 - I wanna scream. 33 May I? 35 (screams) 43 - Oh that's Japanese. 45 I know it. 49 - Oh. 50 - Oh it smells good. 53 (mumbles) 56 - Yum. 58 (mumbles) 65 - Spicy. 70 - I wonder why they make it"
const num=2;
var tmp=cartions.replace(/(\d+)/g,"\n$1\n").split(/\n/);
tmp=tmp.splice(1,tmp.length-2);
tmp=tmp.map(x=>x.replace(/^\s+|\s+$/g,""));
const result=tmp.reduce((x,y)=>x[x.length-1].length===num?(x.push([y]),x):(x[x.length-1].push(y),x),[[]]);
console.log(result);

[yambejp]

課題：先頭が数値じゃない場合、末尾が数値の場合、どうするのでしょうか？

[t-cool]

自前のデータだと先頭は数字なので、ご助言の方法で解決できました！
ありがとうございました！

Answer 4

RegExp.prototype.exec

JavaScriptの正規表現系機能は、gフラグを付与すると、() によるキャプチャが無効となる為、複数回のマッチで対応します。

• RegExp#exec + 繰り返し構文
• String#replace + コールバック関数

今回、String#replaceの返り値を必要としない為、前者で実装します。

let string = "3 - My nail, 6 is very big. 11 (lively music) 26 - Konnichiwa everyone? 27 - Konnichiwa. 29 - Oh Japan. 32 - I wanna scream. 33 May I? 35 (screams) 43 - Oh that's Japanese. 45 I know it. 49 - Oh. 50 - Oh it smells good. 53 (mumbles) 56 - Yum. 58 (mumbles) 65 - Spicy. 70 - I wonder why they make it";

const reg = /\s*(\d+) - ((?:(?!\d+ - )[\s\S])+)|([\s\S])/g, array = [];
let result;

while (result = reg.exec(string)) {
  if (result[3]) throw new Error('parse error');
  array.push([result[1], result[2]]);
}

gフラグ付のRegExp#execは同じ場所に複数回マッチする事はありませんが、読み飛ばしは発生するので、([\s\S]) で意図せぬ読み飛ばしにパースエラーを返すように正規表現を組みます。

※未検証コードの為、期待通りに動作しない可能性があります。
アルゴリズムは使えると思います。

Re: t-cool さん

Comments

[t-cool]

ご助言、ありがとうございました！

Answer 5

時刻と文字が繰り返し現れるデータ

ご質問の修正を経てcaptionsは「秒単位の数値と文字が繰り返し現れるデータ」になっていますが、
初回の例では、正規表現で時刻フォーマット（hh:mm:dd）にマッチさせる方法が使えます。

const firstData = "00:00:03 - My nail, 00:00:06 is very big. 00:00:11 (lively music) 00:00:26 - Konnichiwa everyone? 00:00:27 - Konnichiwa. 00:00:29 - Oh Japan. 00:00:32 - I wanna scream. 00:00:33 May I? 00:00:35 (screams) 00:00:43 - Oh that's Japanese. 00:00:45 I know it. 00:00:49 - Oh. 00:00:50 - Oh it smells good. 00:00:53 (mumbles) 00:00:56 - Yum. 00:00:58 (mumbles) 00:01:05 - Spicy. 00:01:10 - I wonder why they make it";

const parseCaptions = src => {
  const int = n=>parseInt(n);
  let rslt = [], segment, pointer = 0;

  src.replace(/(\d{2}):(\d{2}):(\d{2})\s/g, (timeformat, hour, min, sec, offset)=>{

    if( !pointer ) segment=[];
    else {
      segment.push( src.substring( pointer, offset ) );
      rslt.push( segment );
      segment = [];
      pointer = offset;
    }
    segment.push( int(hour)*60*24 + int(min)*60 + int(sec) + "" );
    pointer += timeformat.length;
  });

  segment.push( src.substring( pointer ) );
  rslt.push( segment );

  return rslt;
}

console.log( JSON.stringify(parseCaptions(firstData),null,2) );

ご助言、よろしくお願い致します

String#replace() の第二引数に関数を指定し、マッチしたタイミングの文字位置（offset）を活用すると、whileループで行うような字句解析が実現できます。

---

要件「時刻と文字が繰り返し現れるデータ」の文字に、数字の混入を許容する場合は「特定のフォーマット（という特徴）＋任意の文字」の組み合わせのほうが、字句解析としては処理しやすい事例かもしれません。
処理対象のデータが改行された複数行テキストであるなど、他にも特徴があれば、より変換しやすくなると思います。

Comments

[t-cool]

ご助言、ありがとうございました！

Answer 6

draqさんの回答はすごいですね。
正規表現でsplitできるんだ。勉強になりました。

単純なものならよいのですが
正規表現は複雑になると、可読性が悪く、可変性が低く、デバッグもしくにいので
あまり使うべきではないと思っている派なので普通のコードで実現してみました。

let cartions = "3 - My nail, 6 is very big. 11 (lively music) 26 - Konnichiwa everyone? 27 - Konnichiwa. 29 - Oh Japan. 32 - I wanna scream. 33 May I? 35 (screams) 43 - Oh that's Japanese. 45 I know it. 49 - Oh. 50 - Oh it smells good. 53 (mumbles) 56 - Yum. 58 (mumbles) 65 - Spicy. 70 - I wonder why they make it"

const result = [];
let buffer = '';
const cartionsArray = cartions.split(' ');
cartionsArray.forEach(value => {
  if (buffer !== '' && _.isInteger(Number(value))) {
    const bufferArray = buffer.split(' ');
    result.push([bufferArray[0], bufferArray.slice(1, bufferArray.length - 1).join(' ')]);
    buffer = '';
  }
  buffer += value + ' ';
});
    const bufferArray = buffer.split(' ');
    result.push([bufferArray[0], bufferArray.slice(1, bufferArray.length - 1).join(' ')]);

console.log(result);

実行結果は次の通りです。

0: (2) ["3", "- My nail,"]
1: (2) ["6", "is very big."]
2: (2) ["11", "(lively music)"]
3: (2) ["26", "- Konnichiwa everyone?"]
4: (2) ["27", "- Konnichiwa."]
5: (2) ["29", "- Oh Japan."]
6: (2) ["32", "- I wanna scream."]
7: (2) ["33", "May I?"]
8: (2) ["35", "(screams)"]
9: (2) ["43", "- Oh that's Japanese."]
10: (2) ["45", "I know it."]
11: (2) ["49", "- Oh."]
12: (2) ["50", "- Oh it smells good."]
13: (2) ["53", "(mumbles)"]
14: (2) ["56", "- Yum."]
15: (2) ["58", "(mumbles)"]
16: (2) ["65", "- Spicy."]
17: (2) ["70", "- I wonder why they make it"]
length: 18

Answer 7

まずは、自分でコードを考えてくださいね

ヒントとしては文字列の規則性を考えてください。

それが解ったらその規則性をどのようにプログラムに当てはめていくか？

例えばindexOfなどを使ってみるとか
https://www.sejuku.net/blog/21049

indexOfを使ったアプローチが正解か？は解りませんがマズは色々試すことが重要です。