JavaScript のソースコードのコメント部分を HTML のタグで囲む JavaScript のテストです。自分用レベルのものです。

ソースコードをのせる時

当ブログに、 JavaScript のソースコードを載せる時に、 JavaScript のコメントアウトしてある部分を HTML タグで囲んで、 class 属性を指定して、スタイルシートで色を変えたいので、下の変換フォームを作成してみました。自分用レベルのものです。

目次まで戻る

置換フォーム

下の入力欄の「置換文字列」の「class="comment-008000"」は、当ブログで使用している、スタイルシートのクラス名です。「comment-008000」のクラス名を変更したとして、一例として見ていただければと思います。

プライバシーポリシー

下記フォームの入力内容、実行結果は、当サイト管理人および外部に送信される仕組みで作成していません。ただ、何があるか分からないので、念のため、重要な情報は入力しないほうが良いと思います。

対象文字列

検索パターン

置換文字列

置換結果1 ※ jQuery の .text() で出力

※ここに置換結果が表示されます。

目次まで戻る

html ソースコード

<form>

<div class="form-group">
    <label for="p3404t">対象文字列</label>
    <textarea id="p3404t" class="form-control" rows="10" placeholder="ここには対象の文字列を入力します。　例） ABCDEFGHI">&lt;script&gt;
/*
コメント
*/
alert( "aaa" ); //コメント
/*
コメント
*/
alert( "aaa" ); //コメント
&lt;/script&gt;</textarea>
</div>

<div class="form-group">
    <label for="p3404k">検索パターン</label>
    <textarea id="p3404k" class="form-control" rows="1" placeholder="ここには正規表現の検索パターンを入力します。　例） (//.*|/\*[.\s\S]*?\*/)">(//.*|/\*[.\s\S]*?\*/)</textarea>
</div>

<div class="form-group">
    <label for="p3404c">置換文字列</label>
    <textarea id="p3404c" class="form-control" rows="1" placeholder="対象文字列をここの文字列で置換します。　例） &lt;span class=&quot;comment-008000&quot;&gt;$1&lt;/span&gt;">&lt;span class="comment-008000"&gt;$1&lt;/span&gt;</textarea>
</div>

<div class="form-group">
    <button id="p3404j" class="btn btn-default" type="button">実行する</button>
</div>

<p>
    <b>置換結果1 ※ jQuery の .text() で出力</b>
</p>

<pre id="p3404ck1">※ここに置換結果が表示されます。</pre>

</form>

目次まで戻る

js ソースコード

jQuery( function( $ ){
    $( "#p3404j" ).click( function(){ //jikkou 実行ボタンクリック時

        var t = $( "#p3404t" ).val().toString(); //taishou 対象文字列取得
        var k = $( "#p3404k" ).val().toString(); //kensaku 検索パターン取得
        var c = $( "#p3404c" ).val().toString(); //chikan  置換文字列取得

        if( t !== "" ){

            t = t.replace( /&/gim  , "&amp;" );  //HTMLタグ無効化 , & の変換から始めている。
            t = t.replace( /"/gim  , "&quot;" ); //HTMLタグ無効化
            t = t.replace( /'/gim  , "&#039;" ); //HTMLタグ無効化
            t = t.replace( /</gim  , "&lt;" );   //HTMLタグ無効化
            t = t.replace( />/gim  , "&gt;" );   //HTMLタグ無効化
            t = t.replace( /\t/gim , "    " );   //タブ（ \t ）を半角スペース 4 個に変換

            var fl = "gim"; //flags 正規表現フラグ取得
            var ro = new RegExp( k , fl ); //Regular Expression Object 新規作成。正規表現のパターンとフラグを変数で設定できる。
            var ck = t.replace( ro , c );  //chikan kekka 取得
    
            $( "#p3404ck1" ).text( ck ); //chikan kekka 1 表示
    
        }

    } );
} );

目次まで戻る

正規表現のピリオド

正規表現のピリオド（ . の記号）には、全ての文字が一致すると思っていました。改行も含まれていると思っていました。思い込み通りに進んで、以下のような「検索パターン」で、最初はやってみたのですが、思った通りにはなりませんでした。

正規表現の検索パターン：

(//.*|/\*[.]*?\*/)

「//」から始まるコメント文は、できたのですが、「/*」から始まり「*/」で終わるコメント文が、タグで囲われません。

そこで、以下のリンクを改めて見てみると、ピリオドは、改行文字を除いた 1 文字にマッチするようです。改行文字には、一致しないようです。

RegExp - JavaScript | MDN: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp#character-classes

改行が挟まれている場合は、ピリオドでは一致しないようなのです。ということで、上記の MDN （ Mozilla Developer Network ）のページを見てみますと、「\s」「\S」という、正規表現の文字クラスがあるようです。

「\s」は、改行文字関係にマッチするようです。

「\S」は、空白以外の文字にマッチするようです。

ということで、以下の正規表現に変更してみたところ、とりあえず、成功しました。

正規表現の検索パターン：

(//.*|/\*[.\s\S]*?\*/)

目次まで戻る

VBA のコメント

2018.02.07 追記

当ブログでは、 Excel VBA のコードを載せることも多いので、 VBA のソースコードのコメント部分も HTML タグで囲めるように、 VBA 用の正規表現も考えてみました。

VBA 用の正規表現は、以下のようにしてみました。

VBA 用の正規表現の検索パターン：

(&#039;.*)

最初は、 ('.*) で試してみましたが、反応がなかったので、よく見てみたところ、 js のコードの中で、 HTML タグの無効化として、シングルクオート（ ' の記号）を ' に変換済みだったので、上手くいかないようでした。正規表現を実行する時点で、シングルクオートの文字は存在しておらず、 ' に置換されている状態なのでした。

js のソースコードに以下の記述を追加しました。 .val() でバックスラッシュ（ \ 円の文字）を入力する時に、 \\ と入力しないと、 \ の文字が消えてしまいました。

js に追加したコード：

$( "#p3404js" ).click( function(){ //js 用検索パターン入力ボタンクリック時
    var k = $( "#p3404k" ).val("(//.*|/\\*[.\\s\\S]*?\\*/)"); //検索パターン入力
} );

$( "#p3404vba" ).click( function(){ //vba 用検索パターン入力ボタンクリック時
    var k = $( "#p3404k" ).val("(&#039;.*)"); //検索パターン入力
} );

上の置換フォームで VBA 用の正規表現もテストしてみました。以下の VBA のソースコードを置換換してみます。シングルクオート（ ' ）以降の文字が HTML タグで囲まれるはずですが、どうなるか。

VBA のソースコード：

Sub test()

    'メッセージを表示
    MsgBox ("Excel") '画面にメッセージを表示する関数です。

    'メッセージを表示
    MsgBox ("VBA") '画面にメッセージを表示する関数です。

End Sub

以下のソースコードが、出力されました。シングルクオート（ ' ）以降のコメントの文字が HTML の <span></span> タグで囲まれています。

置換フォームで変換した結果：

Sub test()

    <span class="comment-008000">&#039;メッセージを表示</span>
    MsgBox (&quot;Excel&quot;) <span class="comment-008000">&#039;画面にメッセージを表示する関数です。</span>

    <span class="comment-008000">&#039;メッセージを表示</span>
    MsgBox (&quot;VBA&quot;) <span class="comment-008000">&#039;画面にメッセージを表示する関数です。</span>

End Sub

以下が、ブラウザで表示した時のイメージです。コメント部分の文字が緑色になっています。とりあえず成功したようです。

Sub test()

    'メッセージを表示
    MsgBox ("Excel") '画面にメッセージを表示する関数です。

    'メッセージを表示
    MsgBox ("VBA") '画面にメッセージを表示する関数です。

End Sub

目次まで戻る

参考資料

RegExp - JavaScript | MDN: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp#character-classes

.text() | jQuery API Documentation: http://api.jquery.com/text/

.html() | jQuery API Documentation: http://api.jquery.com/html/

目次まで戻る

あとがき

正規表現のピリオド（ . の記号）のことを長く、思い違っていました。思ってみれば、複数行対象（ m フラグ設定）のはずの正規表現で、改行を含んでいる時に一致しませんでした。

正規表現の柔軟で、多岐のパターンの文字を処理可能な技術は便利です。

以上、閲覧ありがとうございました。

目次まで戻る

JavaScript のソースコードのコメント部分を HTML のタグで囲む JavaScript のテストです。自分用レベルのものです。

目次

ソースコードをのせる時

置換フォーム

html ソースコード

js ソースコード

正規表現のピリオド

VBA のコメント

参考資料

あとがき

同じカテゴリの投稿（ JavaScript ）

前後の投稿

リンク

ブログカテゴリー

閲覧数上位