JavaScriptでテキストを整形するコードを書く
こんにちは。弥生の津輕です。 この記事はMisoca+弥生+ALTOA Advent Calendar 2018 の記念すべき1日目として掲載しています。
はじめに
テスト用のJSON形式のデータを作成・確認する時に、お世話になっているエディタのマクロやVisual Studio Codeのフォーマット機能みたいにちょっとしたサンプルデータを整形したい時ってありますよね。今回はJavaScriptでテキストを整形するコードを書いてみました。
このコードでできること
もうすぐクリスマスということでテキストをクリスマスツリー形式に整形します。
こんな感じです
材料はこちら
開発環境
JavaScriptが使えるエディタ→今回はVisual Studio Codeを使用
Visual Studio Codeのダウンロードはこちらからデバッグ
Visual Studio Codeからnode.jsを利用
node.jsのダウンロードはこちらからささやかな文字列を少々
どこでも手に入る何の変哲もない文字列でOK参考 utf-8の文字コード
コードはこちら
整形の時に意識すること
- 適切なインデント
- 全角と半角の表示幅の違い
- 文字コード
- 神経質にならない
全角と半角について
単純に文字数をカウントすると全角と半角で表示幅が違うのでツリーが残念なことになってしまいます。
それがこちら
//文字幅のカウント
var widthcount = function (str) {
var len = 0;
var ch = "";
for (var i = 0; i < str.length; i++) {
ch = str.substring(i, i + 1);
if (ch.match(/^[\u2700-\uff65]+$/)) {
len += 2;
}
else {
len += 1;
}
}
return len;
}
文字幅はフォントによって違いますが、ここは潔く全角=2byte分、それ以外は1byte分としてます。
ちなみに文字列のバイト数をカウントするためにnode.jsのBuffer.byteLengthでasciiを使ってみたら数を控えめに申告してきます。何ででしょうね。
var countU = Buffer.byteLength('あいうえお','utf8');
var countA = Buffer.byteLength('あいうえお','ascii');
console.log(countU);//15 ←わかる
console.log(countA);//5 ←10じゃないの？
結果
15 5
おわりに
文字列を扱う時に、毎回環境や文字コードの違いに悩まされますね。
今回のコードは利用機会がかなり限られますが、これからも便利になるコードを書いていきたいと思います。
次回は@mallowlabsさんによる「Quick JUnitのRuby版っぽいVSCode拡張作ってみた」の予定です！
