【JavaScript(HTML)】対応するダブルコーテーションが正しく入力されているか確認する方法【テストツール】

JavaScript

はじめに

テキストエリア内で対応するダブルコーテーションが正しく入力がされているのか。。

ダブルコーテーションで括られた範囲を表示することで誤入力を防げるため、対応するダブルコーテーションが正しく入力されているか表示するJavaScript(HTML)を作りました。

コーテーション範囲をオレンジで表示

対応するダブルコーテーションが正しく入力されているか確認するデモ

対応するダブルコーテーションが正しく入力されているか確認するデモです。

以下テキストエリアへダブルコーテーションを文字を入力すると、ダブルコーテーションで括られた単位で色を付けて表示します。

【テキストエリア】
{ id : 111, products : [ { name : Coffee , quantity : 1 } ] }

実装方法

テキストエリア内で対応するダブルコーテーションが正しく入力されているか表示するJavaScript(HTML)を実装します。

以下のソースをコピーしテキストエディタへ貼付け、保存してください。(ファイル名は任意、拡張子は.html)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>【JavaScript(HTML)】対応するダブルコーテーションが正しく入力されているか確認する【テストツール】</title>
    <!-- こちらのjqueryはバージョンアップ等、適宜変更してください -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> 
  </head>
  <body>
    テキストエリア<BR>
    <textarea id="req_text" cols=120 rows=10>
{"id": 111,
  "products": [
                {
                  "name": "Coffee",
                  "quantity": 1
                }
              ]
}
</textarea>
    <div id="req_overlay" cols=120 rows=10>
{ <span class="overlay">id</span> <span>: 111,
  </span> <span class="overlay">products</span> <span>: [
                {
                  </span> <span class="overlay">name</span> <span>: </span> <span class="overlay">Coffee</span> <span>,
                  </span> <span class="overlay">quantity</span> <span>: 1
                }
              ]
}
    </div>
  </body>
</html>
<script type="text/javascript">
const textElem    = document.querySelector('#req_text');
const overlayArea = document.querySelector('#req_overlay');

//keyup時処理
textElem.addEventListener('keyup', (event) => {
  var txt = '\n' + event.target.value + '\n';
  txt= dQuotaOverLay(txt);
  overlayArea.innerHTML = txt;
});

//ダブルコーテ表示
function dQuotaOverLay(text) {

    const charPartsList = text.split('"');
    let spanSource = '';
    for (let i = 0; i < charPartsList.length; i++) {
        if (spanSource !== '' && !spanSource.match(/ $/)) {
            spanSource += ' ';
        }
        if (charPartsList[i] === '') {
            spanSource += ' ';
        } else {
            if (i % 2 == 1) {
                spanSource += `<span class='overlay'>${charPartsList[i]}</span>`;
            } else {
                spanSource += `<span>${charPartsList[i]}</span>`;
            }
        }
    }
    return spanSource;
}

//テキストエリアサイズ変更対応
document.addEventListener('DOMContentLoaded', () => {
  const observer = new MutationObserver(() => {
    const width  = textElem.getBoundingClientRect().width
    const height = textElem.getBoundingClientRect().height
    overlayArea.style.width  = width + "px";
    overlayArea.style.height = height + "px";
  })
  observer.observe(textElem, {
    attriblutes: true,
    attributeFilter: ["style"]
  })
}, false)

//テキストエリア改行対応
$('#req_text').scroll(function() {
  var t = $(this).scrollTop();
  var l = $(this).scrollLeft();
  $('#req_overlay').scrollTop(t);
  $('#req_overlay').scrollLeft(l);
});
</script>
<style>
#req_text {
    background-color: transparent;
    padding: 13px 12px;
    position: absolute;
    overflow-wrap: break-word;
    margin: 2px;
    white-space: pre-wrap;
    font-family: monospace;
    font-size: 14px;
    width: 800px;
    height: 150px;
}
#req_overlay {
    color: #e2e2e2;
    padding: 1px 12px;
    overflow: hidden;
    overflow-wrap: break-word;
    margin: 2px;
    white-space: pre-wrap;
    font-family: monospace;
    font-size: 14px;
    width: 800px;
    height: 150px;
}
#req_overlay span.overlay {
    background-color: #fff7ef;
    border-radius: 2px;
    box-shadow: 0 0 0 1px #ffe5cc;
    padding-bottom: 1px;
    padding-top: 1px;
}
</style>

テキストエリアのサイズや位置は必要に応じて微調整してください。

※47行目:const charPartsList = text.split(‘”‘); の「”」の部分を変更することで、シングルコーテーションなど別の文字括りにも対応できます。

便利な入力補助機能

テキストエリアへJSONデータを入力する際の入力補助機能を以下の記事で紹介しています。

解説

テキストエリアの下へdivタグを重ねています。

keyup時に、JavaScriptでダブルコーテーションで括られた範囲をspanタグへ入れ、他の文字も含めてdivタグへ入れてます。

ダブルコーテーション範囲のspanタグへは、背景色付きのclassが設定されています。

コーテーション範囲の見分け方は、テキストエリアの文字列をコーテーション単位で区切り、配列indexが奇数の場合のみ色付けしています。

黄色網掛けがコーテーション範囲の対象

対応するダブルコーテーションを検証するメリットは?

1. コードの正確さを保証する

  • ダブルコーテーションの対応が正しくないと、コードの論理構造が崩れ、エラーが発生します。これによりプログラムが正しく動作しなくなったり、予期しない動作を引き起こす可能性があります。
  • 特に、テスト用のJsonデータを手で作成する際は構造が誤認識され、意図しない結果を招くことがあります。

2. デバッグやテスト時間の短縮

  • ダブルコーテーションの不一致によるエラーは、原因の特定が難しい場合があります。事前にダブルコーテーションの対応を確認することで、デバッグやテストにかかる時間を大幅に短縮できます。
  • ダブルコーテーションのミスがなくなることで、他の論理的なエラーに集中できるようになります。

3. 可読性の向上

  • 正しく対応したダブルコーテーションは、コードの構造を明確にし、他の開発者や自分が後から見たときに理解しやすくなります。
  • 可読性の高いコードは、保守性も向上し、将来的な変更や修正が容易になります。

4. バグの防止

  • ダブルコーテーションの不一致は、致命的なバグを引き起こすことがあります。特に、メモリ管理やリソースの解放が重要なプログラムにおいて、ダブルコーテーションのミスが原因でリソースリークやクラッシュが発生することがあります。
  • 事前にダブルコーテーションの対応を確認することで、こうしたバグを未然に防ぐことができます。

5. ツールやエディタのエラー表示を回避

  • ダブルコーテーションの不一致は、エディタや統合開発環境(IDE)でエラーとして表示されることがあります。これが大量に表示されると、他の重要な警告やエラーを見逃す可能性が高まります。
  • ダブルコーテーションを正しく対応させることで、エディタのエラーメッセージを減らし、本当に重要な問題に集中できます。

6. コードの移植性向上

  • ダブルコーテーションが正しく対応しているコードは、他の環境や他の開発者に渡す際にも、スムーズに動作します。これにより、チームでの開発や異なるプラットフォームへの移植が容易になります。

これらの理由から、ダブルコーテーションの対応を検証することは、コードの品質を維持し、効率的な開発を進めるために非常に重要です。

まとめ

JavaScript(HTML)でテキストエリア内のダブルコーテーションが正しく括られているか表示する方法を説明しました。

テキストエリア内のダブルコーテーションで括られた範囲を表示することで誤入力を防げるので便利です。

コメント

タイトルとURLをコピーしました