プログラムソース解説：コンマ(,)区切りの文字列の要素を、括弧[]でそれぞれ囲む - ver1.0

イントロダクション

コンマ(,)区切りの文字列の要素を、括弧[]でそれぞれ囲むプログラムを作成しました。

コンマ(,)区切りの文字列の要素を、括弧[]でそれぞれ囲むサービスを作りました
http://upa-pc.blogspot.com/2015/02/Make-Comma-Separated-Words-to-Square-Bracket-Separated-Words.html


その時に作成したソースコードを以下のページに記載しています。

プログラムソース:コンマ(,)区切りの文字列の要素を、括弧[]でそれぞれ囲む - ver1.0
http://upa-pc.blogspot.com/2015/02/Src-Comma-Separated-Words-to-Square-Bracket-Separated-v1.0.html

今回は、そのプログラムのソースコードについて、どのような意図でそのようなコードを書いたのか記載します。

ソースコード解説

入力部

<form onsubmit="return false;">
    <strong>(ダブルクォーテーション(")で囲まれた)コンマ(,)区切りの文字列 :</strong><br />
    <input type="text" id="input-text" style="width: 700px" /><br />
    <input type="checkbox" id="auto-focus-move" checked="checked" />自動的に結果を選択する<br />
    <p>
    例）“Dr.ウーパ , コンピュータ備忘録 , Blog”
    </p>
</form>

「(ダブルクォーテーション(")で囲まれた)コンマ(,)区切りの文字列 :」を入力するための部分です。

エンターキーが押されたときに、form タグ内のデータがサーバへ送信されないようにするために、onsubmit イベントにて、"return false;"しています。
（なお、このプログラムはサーバに入力データを送って処理を行うものではないので、この onsubmit イベントの "return false;" が無いと、ページがリロードされて入力したデータが消えてしまいます。）

2/3 Enterキーで送信されてしまうのを防ぐ [ホームページ作成] All About
http://allabout.co.jp/gm/gc/23972/2/

出力部

<form onsubmit="return false;">
    <strong>括弧[]でそれぞれの要素を囲んだ結果：</strong><br />
    <input onfocus="this.select();" type="text" id="output-text" style="width: 700px" />
</form>
<br />

「括弧[]でそれぞれの要素を囲んだ結果：」を画面に出力するための部分です。

入力部と同様に、エンターキーが押されたときに、form タグ内のデータがサーバへ送信されないようにするために、onsubmit イベントにて、"return false;"しています。

プログラムのメイン部

<script type="text/javascript">
<!--
    (function () {

        var id_input = "input-text";        // 入力値を保持する要素の id
        var id_output = "output-text";      // 出力値を保持する要素の id

        // 前回検査時の入力値
        var input_old_text = "";

        // 定期的に入力を監視し、入力が変化していたら、出力する
        setInterval((function () {

            // 入力されたダブルクォーテーション(")で囲まれたコンマ(,)区切りの文字列
            var input_text = document.getElementById(id_input).value;

            if (input_text != input_old_text) {

                // 入力されたダブルクォーテーション(")で囲まれたコンマ(,)区切りの文字列を、
                // 括弧[](角括弧、大括弧、ブラケット)でそれぞれ囲んだ文字列に変換する
                var output_text = changeInputText(input_text);

                document.getElementById(id_output).value = output_text;
                if (document.getElementById("auto-focus-move").checked) {
                    document.getElementById(id_output).select();
                }

                input_old_text = input_text;

            }

        }), 500);

JavaScript のプログラムの中で、最初に実行される部分です。

入力のテキストボックスを監視し、入力データが変化していたら、括弧[]でそれぞれ囲んだ文字列に変換し、出力のテキストボックスへデータを出力しています。

監視間隔は、setInterval で指定している 500 ms ごとです。
入力のテキストボックスに入力されたテキストが変化するごとにイベントが発生すれば、そのイベントにこの処理を書くのが良さそうですが、どうやら JavaScript ではそのようなイベントが無さそう（テキストボックスの onchage イベントは、データが入力される毎ではなく、フォーカスを失った時に発生する）なので、タイマによる定期的な入力データの変更チェックを行うことにしました。

[Javascript] テキスト入力欄(input, textarea)の値をリアルタイムに監視するには | t87r
https://t87r.wordpress.com/2013/09/10/javascript-%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E5%85%A5%E5%8A%9B%E6%AC%84input-textarea%E3%81%AE%E5%80%A4%E3%82%92%E3%83%AA%E3%82%A2%E3%83%AB%E3%82%BF%E3%82%A4%E3%83%A0%E3%81%AB%E7%9B%A3/

テキストボックスのonchangeイベントを信用するべからず - 熱燗ロックのブログ
http://d.hatena.ne.jp/atsukanrock/20100427/1272358711

なお、ページ内の他の JavaScript コードと干渉しないように、コード全体を (function () {})(); で囲んでいます。

文字列変換部

        /*
        入力されたダブルクォーテーション(")で囲まれたコンマ(,)区切りの文字列を、
        括弧[](角括弧、大括弧、ブラケット)でそれぞれ囲んだ結果を返す
        */
        function changeInputText(input_text) {

            return "[" +
                input_text.replace(/["“”]/g, "")
                    .replace(/\s*[,，]\s*/g, "][") +
                "]";
        }


正規表現を用いた文字列の置換によって、入力されたダブルクォーテーション(")で囲まれたコンマ(,)区切りの文字列を、括弧[]でそれぞれ囲んだ文字列に変換しています。

ダブルクォーテーションの置換では、半角(")と全角(“”)の計 3 パターンに対応しています。
コンマの置換では、半角(,)と全角(，)の計 2 パターンに対応しています。

まず、文字列中にダブルクォーテーションが現れたら空白に置換したものを得ます。
その後、それに対して、両側にスペースが入っているかもしれないコンマが現れたら、][ に置換しています。
その結果を、両側から "[" と "]" で囲むことで、

[Keyword1][Keyword2]

というような文字列を生成しています。

テスト部

        var debug_flag = false;
        if (debug_flag) {

            /* テスト用 */
            (function () {

                var error_count = 0;

                (function () {
                    var input = "“Dr.ウーパ，コンピュータ備忘録 , Blog”";
                    var output = changeInputText(input);
                    var error = output != "[Dr.ウーパ][コンピュータ備忘録][Blog]";
                    if (error) error_count++;
                    console.log("input," + input + ",output," + output + ",error," + error);
                })();
                (function () {
                    var input = "\"Dr.ウーパ , コンピュータ備忘録，Blog\"";
                    var output = changeInputText(input);
                    var error = output != "[Dr.ウーパ][コンピュータ備忘録][Blog]";
                    if (error) error_count++;
                    console.log("input," + input + ",output," + output + ",error," + error);
                })();
                (function () {
                    var input = "Dr ウーパ コンピュータ 備忘録 ， Bl og";
                    var output = changeInputText(input);
                    var error = output != "[Dr ウーパ コンピュータ 備忘録][Bl og]";
                    if (error) error_count++;
                    console.log("input," + input + ",output," + output + ",error," + error);
                })();

                console.log("error_count," + error_count);
                if (error_count > 0) {
                    console.log("Test NG");
                } else {
                    console.log("Test OK");
                }
            })();
        }
    })();

この部分はテストのときのみ使用します。
いくつかの入力データを用意しておき、期待するテスト結果になっているかをテストし、結果をコンソールのログに出力しています。

小さな変更をプログラムに加えた時や、複数の種類のブラウザにて、手動でテストするのはかなり大変なため、プログラムでテストできるようにしてあります。


//-->
</script>


以上が、このプログラムの全てです。