プログラムソース:コンマ(,)区切りの文字列の要素を、括弧[]でそれぞれ囲む - ver1.1:Blogger特有の問題の修正

これは何？

以下のページで動作させているプログラムのソースコードです。

Dr.ウーパのコンピュータ備忘録: コンマ(,)区切りの文字列の要素を、括弧[]でそれぞれ囲む : Comma Separated Words to Square-Bracket Separated Words
http://upa-pc.blogspot.jp/p/double-quotes-comma-to-square-bracket.html

入力されたコンマ(,)区切りの文字列の要素を、括弧[]でそれぞれ囲んだ結果を出力します。

なお、このソースコードは初版(Ver1.0)のBlogger特有の問題を修正したVer1.1です。
その後、修正が行われていれば、現在動作しているプログラムとは異なっている可能性があります。

Ver1.0からの修正箇所

Bloggerだとページ中のJavaScriptの一部の文字が自動的にエスケープされてしまう問題へ対処

Blogger のページへ JavaScript を張り付けて公開すると、一部の文字が自動的にエスケープされてしまい、プログラムが正常に動作しないことが分かりました。

そのため、Blogger において、一部の文字が自動的にエスケープされたとしても、プログラムが正常に動作するように修正しました。

詳細は以下のページをご覧ください。

Bloggerだとページ中のJavaScriptの一部の文字が自動的にエスケープされてしまう。その時に取った対応
http://upa-pc.blogspot.com/2015/02/blogger-javascript-text-escape-trouble.html

正常に動作することを確認することの実行を必須化

「Bloggerだとページ中のJavaScriptの一部の文字が自動的にエスケープされてしまう問題」が発生していたのにも関わらず、しばらくその問題に気が付きませんでした。

そのため、ページを開いた時に、自動的に基本的なテストを実行し、正常に変換できることを確認することにしました。

何らかの問題により、正常に変換が実行されない場合には、次の警告メッセージをページの先頭に表示します。

警告メッセージ：
[!] プログラムにエラーがあることを検知しました。
正常な結果を得られない可能性があります。

ソースコード：

<div id="double-quotes-comma-tosquare-bracket-message"></div>
<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>

    <input type="hidden" id="reg-exp-double-quotes-list" value="&quot;“”" />
    <input type="hidden" id="reg-exp-comma-list" value=",，" />
    
</form>

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


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

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

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


        // ダブルクォーテーション(") 認識用データ
        var double_quotes_array = document.getElementById("reg-exp-double-quotes-list").value.split("");
        var double_quotes_str = double_quotes_array.join("");

        // コンマ(,)認識用データ
        var comma_array = document.getElementById("reg-exp-comma-list").value.split("");
        var comma_str = comma_array.join("");


        // 定期的に入力を監視し、入力が変化していたら、出力する
        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);


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

            return "[" +
                input_text.replace(new RegExp("[" + double_quotes_str + "]", "g"), "")
                    .replace(new RegExp("\\s*[" + comma_str + "]\\s*", "g"), "][") +
                "]";
        }


        var debug_flag = true;
        if (debug_flag) {

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

                var error_count = 0;

                for (var double_quotes_index = 0; double_quotes_index < double_quotes_array.length; double_quotes_index++) {
                    (function () {
                        var input = double_quotes_array[double_quotes_index] + "Dr.ウーパ" + double_quotes_array[double_quotes_index];
                        var output = changeInputText(input);
                        var error = output != "[Dr.ウーパ]";
                        if (error) error_count++;
                        console.log("input," + input + ",output," + output + ",error," + error);
                    })();

                    for (var comma_index = 0; comma_index < comma_array.length; comma_index++) {
                        (function () {
                            var input = double_quotes_array[double_quotes_index] + "Dr.ウーパ" + comma_array[comma_index] + "コンピュータ備忘録 " + comma_array[comma_index] + " Blog" + double_quotes_array[double_quotes_index];
                            var output = changeInputText(input);
                            var error = output != "[Dr.ウーパ][コンピュータ備忘録][Blog]";
                            if (error) error_count++;
                            console.log("input," + input + ",output," + output + ",error," + error);
                        })();
                    }
                }

                for (var comma_index = 0; comma_index < comma_array.length; comma_index++) {
                    (function () {
                        var input = "Dr ウーパ コンピュータ 備忘録 " + comma_array[comma_index] + " 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");
                    document.getElementById("double-quotes-comma-tosquare-bracket-message").innerHTML =
                        "<p>[!] プログラムにエラーがあることを検知しました。<br />正常な結果を得られない可能性があります。</p>";
                } else {
                    console.log("Test OK");
                }
            })();
        }
    })();

//-->
</script>

Dr.ウーパのコンピュータ備忘録

2015年2月18日水曜日