JSON整形・圧縮ツールを作ってみた

背景

JSONテキストを扱うときに自分用のツールが欲しかったので作ってみた。

VSCodeでは、ショートカットキーや右クリックでフォーマット（整形）ができても、圧縮は提供されていなくて（もしあったら知りたい）正規表現で元の整形に直すのが面倒くさかったり、ちょっとしたテストデータを作ってコードに仕込むとき用にエスケープ処理がしたかったので、自分で作ってしまおうと思った。

できあがったもの

ツール名は「23日の金曜日」です。
某スプラッター映画とは全く関係ありません。

主な使用言語

• JavaScript
  （ライブラリは使用せず）

機能要件

• JSON整形
  • 改行とスペースで整形
  • インデントは半角スペース４つ
• JSON1行圧縮
• JSON1行圧縮　+　エスケープ処理

ソースコード

↓今思ったけどリファクタリングはしてない（笑）追記2022/12/04

//1行圧縮
function oneline() {
    var jsonText = document.getElementById('ta-input-text');
    var s = jsonText.value.replace(/[ \t\r\n\\]/g, ""); //スペース、タブ、改行CRLFを取り除く
    var textArea = document.getElementById('ta-input-text');
    textArea.value = s;
}

//整形
function format() {
    var jsonText = document.getElementById('ta-input-text');
    if (jsonText == null) return;
    var s = jsonText.value.replace(/[ \t\r\n\\]/g, ""); //スペース、タブ、改行CRLFを取り除く
    var json = JSON.parse(s); //一旦JSのオブジェクトに変換
    var textArea = document.getElementById('ta-input-text');
    textArea.value = JSON.stringify(json, null, "    "); //整形して文字列で返す
}

// 1行圧縮してエスケープ
function onelineEscape() {
    var jsonText = document.getElementById('ta-input-text');
    var s = jsonText.value.replace(/[ \t\r\n\\]/g, "") //スペース、タブ、改行CRLFを取り除く
        .replace(/[\"]/g, "\\\""); //「"」があったらエスケープする
    var textArea = document.getElementById('ta-input-text');
    textArea.value = s;
}

実行結果

//整形
{
	"member": [
		{
			"id": "1",
            "name": "山田太郎",
		},
		{
			"id": "2",
            "name": "山田花子",
		},
		{
			"id": "3",
			"name": "ドラゴン",
		}
	]
}

//1行圧縮
{"member":[{"id":"1","name":"山田太郎",},{"id":"2","name":"山田花子",},{"id":"3","name":"ドラゴン",}]}

//1行圧縮（エスケープ処理）
{\"member\":[{\"id\":\"1\",\"name\":\"山田太郎\",},{\"id\":\"2\",\"name\":\"山田花子\",},{\"id\":\"3\",\"name\":\"ドラゴン\",}]}

できた。