JS ベタ打ち原稿を成型して出力するには？

質問

JavaScript ベタ打ち原稿を成型して出力するには？

未編集の洋楽プレイリストがあります。
これを、次の書式どおりに成型することにします。

[成型後の書式] ２桁の連番_歌手名_-_曲名_(分:秒) or (西暦年) [_：半角空白]

＜仕様＞
・jQuery等のプラグインは不使用のこと
・「連番、歌手名、曲名、演奏時間」が１行ずつのまとまり
・演奏時間の箇所が 西暦年の場合がある

・歌手名、曲名に 次の記号が含まれている場合がある
　アンパサンド、半角括弧、アポストロフィ、バッククォート　（＆ （ ） ’ `）

手順１ テキストエリア「genkou」にベタ打ち原稿を貼り付けます。
手順２ 実行ボタンを押すと、テキストエリア「result」に成型して出力します。

そうするためには、どのような JavaScriptコードになりますか。

[HTML]
<textarea id="genkou" cols="100" rows="30">
01 - Artie Garr (a.k.a Art Garfunkel) - Beat Love (1959) 02 - Mark Dinning - Loving Touch (2:10) 03 - Petty Booka - Bla Bla Bla Cha Cha Cha (2:28) 04 - Sam Fletcher - I'd Think It Over (2:38) 05 - Untouchables - Raisin Sugar Cane (2:11) 06 - Esther Phillips - Just Say Goodbye (2:18) 07 - Eddie Holland - Jamie (2:23) 08 - Della Reese - Tea For Two (2:13) 09 - Danny Winchell - Por Favor (2:10) 10 - Clyde Otis - Jungle Drums (1:56) 11 - Christine Quaite - Your Nose Is Gonna Grow (2:10) 12 - Martin Bet - I Know A Girl (2:01) 13 - Arthur Alexander - Anna (2:52) 14 - Mickey & Sylvia - Love Is Strange (2:54) 15 - Richard Anthony - Cin Cin (Chin Chin) (3:02) 16 - Sarah Vaughan - Broken Hearted Melody (2:55) 17 - Aphrodite's Child - Rain And Tears (1968) 18 - Nico Landers - Stil In De Straten (2:26) 19 - Ginny Arnell - He's My Little Devil (2:10) 20 - Azie Mortimer - Lips (2:22) 21 - Ava Max - Salt (2019) 22 - Gun`s N Roses - Don't Cry (1991) 23 - Sarah Vaughan - Smooth Operator (2:27) 24 - The Weeknd - Save Your Tears (2020) 25 - Martha Reeves & The Vandellas - Nowhere To Run
</textarea>

<div>
<button id="btn">実行ボタン</button>
</div>

<textarea id="result" cols="100" rows="10" placeholder="成型後" readonly></textarea>
</textarea>

回答No.3

dell_OK · ベストアンサー

ベタ打ち原稿がほぼ成型後の書式で書かれているので、成型と言うほどのことはしていませんが、このような方法はどうでしょうか。
見る限り、各曲の区切れ目は、連番２桁 - でよさそうな気がします。
連番２桁と - を見つけて、曲分割のための改行を連番の前に入れます。
それを配列にするために改行で分割します。
ベタ打ち原稿と成型後の書式の違いは、連番２桁のあとの - のみのようなので、それを省きます。
あとは配列を改行区切りでつないでresultに入れます。
なお、ベタ打ち原稿が１００曲をこえる（連番３桁以上）ことは想定していません。

var genkou = document.getElementById("genkou").value;
const regex = /[0-9]{2} - /g;
genkou = genkou.replaceAll(regex, '\n$&');
var lines = genkou.split("\n");
lines.shift();
for (var i = 0; i < lines.length; i++) {
lines[i] = lines[i].substring(0, 3) + lines[i].substring(5).trim();
}
document.getElementById("result").value = lines.join("\n");

回答No.2さまの回答は楽しみなので待ってます。

お礼

ご回答ありがとうございます。

補足

dell_OKさん
完璧でした！

回答No.5

AsarKingChang

>回答No.2さまの回答は楽しみなので待ってます。
煽らないで～（笑）あはは

もう、何も使わずベタ関数だけで、やっちゃいました＾＾
（ちなみ、nextのposを先に配列化したほうが効率はいいんだけどね）
php 風の、strpos,substrで仕上げてみましたよ。

回答No.4

AsarKingChang

<script>
function pos(target,check) {
/* 文字として結合 */
let checkN="0"+check;
/* 後方から2文字 */
let checkV=checkN.substr(-2,2);
/* 先頭位置返却 */
return target.indexOf(checkV+" ");
}
let target=document.getElementById('genkou').innerHTML;
let to=document.getElementById('result').innerHTML;
let track;
let p1,p2;
let out="";
/* 1オリジン */
for (track=1;track<100;track++) {
p1=pos(target,track);
p2=pos(target,track+1);
if (p1==-1) {
break;
}
if (p2==-1) {
/* 残り全部 */
out+=target.substr(p1)+"\n";
}else{
out+=target.substr(p1,p2-p1)+"\n";
}
}
/* 元々の、インナーにすでに\nがあるので、最後の全部で空改行になるが、一応はOKじゃない？ */
document.getElementById('result').innerHTML=out;
</script>

#元質問の、HTMLの後ろにくっつけてテストしてみました。
<button id="btn">実行ボタン</button>で反応させてませんが＾＾

アルゴリズムとして"nn "(2桁の数字の直後がスペース)を探してるだけです。
で、見つからない場合、最後の数字から「残り全部出力」
それ以外は、「次に見つかる位置までを出力」

超～～～いい加減に書いてみましたが。
あり？なし？

お礼

ご回答ありがとうございます。

補足

AsarKingChangさん

(テキストエリアの値は value で取得する)
//修正後
let target=document.getElementById('genkou').value;
let to=document.getElementById('result').value;

/*
//修正前
let target=document.getElementById('genkou').innerHTML;
let to=document.getElementById('result').innerHTML;
*/

回答No.2

AsarKingChang

後でやるね。割といい案、思いついた。

お礼

ご回答ありがとうございます。

補足

ぜひとも、・・・。
期待しております！