改行を削除・置き換えするには?Javascript超初心者の勉強

2020-04-05

Webの画面の値をJavascriptで取得しJSON形式に整え、PDF作成ソフトに受け渡しPDFを作成することにしました。

無事表示させることに成功したと思っていたのですが、文字列に改行コードが入ると受け渡したデータの改行後の文字をPDF上に表示してくれないという問題が発生しました。

どうやら画面側の改行コード「 \n 」に対して、PDF作成ソフト側の改行コードは「 \r\n 」のようです。
改行をさせるためには改行コードを「 \n 」から 「 \n\r 」に変換し受け渡さなければならないようです。
置換は割とよくあるシチュエーションな気がするので今後のためにも打開策を調べてみました。

置換する replace()

置換するには「 replace() 」メソッドを使用します。

■replaceの構文
変数.replace( 対象の文字, 置換したい文字 )

実際にコードを書いてみます。

サンプルコード 改行コードをAに変換

let str = 'あああ\nいいい\nううう';
let result = str.replace( /\r?\n/g , 'A')
console.log(result);
//結果 : あああAいいいAううう

/\r?\n/gの解説

初見だと /\r?\n/g を読み解くのが困難だったので解説です。

?は0または1回を意味し、「/\r?\n/」で \rと\r\nを意味します。
gはオプションフラグで文字列を最後まで検索してくれます。
gがないと改行が複数あった場合最後まで置換しれくれません。
正規表現の文字は「 / 」で囲います。
※正規表現でなければ囲う必要なし

参考までに文字の変換

let aa = "aabb";
aa.replace( "bb" , "aa"); // aaaa

サンプルコード 改行コードを削除

削除のほうがより簡単。

let str = 'あああ\nいいい\nううう';
let result = str.replace( /\r?\n/g , '')
console.log(result);
// 結果 : あああいいいううう

サンプルコード

実際に行ったことの省略版。仕組みはわかっても実際にJSONでreplace()するとはまったので備忘録。
以下では改行を削除しています。

stringify()でオブジェクトからストリングに変換し、replace()で改行コードを削除しようとしたものの、\nでは消えてくれず。jsonでは改行を\\nで表すようで、\\nで消すことができました。

「/\r?\n/」である必要もないので「\\n」で問題なかったのですが「/\r?\n/」に「\\n」を盛り込めず断念しました。ひとつずつ書くのが正解なのだろうか。

実験用フォーム

上記のコードを表示させたもの。

適当に値を入力しボタンをクリックするとコンソールに入力した値が表示されます。

改行用に書き出したJSONデータにリプレイス処理をかけることで無事PDFに改行表示がされるようになりました。