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

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

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

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

Contents

置換する replace()

置換する replace()

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

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

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

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

let str = ‘あああ\r\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/」で \nと\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()するとはまったので備忘録。
以下では改行を削除しています。

	<form>
	<!--入力画面作成-->
	<textarea id="newlineTest1" class="sample3" cols="40" rows="8">
	改行をいれてみよう
	</textarea>
	<textarea id="newlineTest2" class="sample3" cols="40" rows="8">
	改行をいれてみよう
	</textarea>
	</form>
	<button id="btn" type="submit" name="example" value="ボタン" >JSON書き出し</button>
	<!--jQueryライブラリの読み込み-->
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<!--Javascript開始-->
	<script>
	$('#btn').click(function(){
	//JSONの入れ物jsonの作成
	let json = {};
	//画面の値取得、jsonに格納
	json.newlineTest1 = $('#newlineTest1').val();
	json.newlineTest2 = $('#newlineTest2').val();
	//改行ありjsonの確認
	console.log(json);
	//jsonをstring(文字列)に変換
	let jsonStr = JSON.stringify(json);
	//文字列から改行コードを削除
	let json2 = jsonStr.replace( /\\n/g , '');
	console.log(json2); //改行削除後
	})
	</script>

view raw json_test hosted with

by GitHub

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

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

実験用フォーム

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

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

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

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