【JavaScript】特定のコメントを要素に置換する

こんにちは、ryohei(@ityryohei)です!

本記事では、JavaScriptで特定のコメントを要素に置換する方法をご紹介しています。ドキュメント内のすべてのコメントを要素に置換する方法と、指定した要素内に存在するコメントのみを置換する方法にわけてご紹介しています。

JavaScriptで特定のコメントを要素に置換したいな。良い方法ないかな?

上記の疑問にお答えします。

では、解説していきます。

ドキュメント内の特定のコメントを要素に置換する

ドキュメント内にあるすべての特定のコメントを指定した要素に置換します。

下記はドキュメント内に存在するTARGET COMMENTと記載されたコメントをh1要素に置換するスクリプトです。replaceの第一引数に正規表現でコメントを指定し、マッチした場合に第二引数の要素に置換します。

HTML

<!doctype html>
<html>
    <head></head>
    <body>
        <section>
            <!-- TARGET COMMENT -->
        </section>

        <section>
            <!-- TARGET COMMENT -->
        </section>
    </body>
</html>

JavaScript

document.body.innerHTML = document.body.innerHTML.replace(/<!-- TARGET COMMENT -->/g, '<h1>REPLACE</h1>');

要素内の特定のコメントを要素に置換する

前項ではドキュメント内に存在するすべてのコメントを置換する方法をご紹介しました。ここではもう少し限定的に、指定した要素内に存在する特定のコメントを要素に置換してみます。

下記はsection要素内に存在するTARGET COMMENTを要素に置換するスクリプトです。置換方法は前項同様にreplaceを使用します。

HTML

<!doctype html>
<html>
    <head></head>
    <body>
        <section>
            <!-- TARGET COMMENT -->
        </section>

        <section>
            <!-- TARGET COMMENT -->
        </section>
    </body>
</html>

JavaScript

document.querySelectorAll('section').forEach((el)=>{
    el.innerHTML = el.innerHTML.replace(/<!-- TARGET COMMENT -->/, '<h1>REPLACE</h1>');
});

これでドキュメント、要素と任意の範囲内に存在するコメントを指定した要素に置換することが可能となります。

最後に

本記事の内容は、カスタマイズ性が低いシステム上でデザインするケースや、サイト構築後に特定の場所に広告タグを挿入したい場合に便利な方法です。用途は限定的ですが、結構役に立つテクニックですので、頭の片隅にでも置いておいてもらえればと思います。

以上、JavaScriptで特定のコメントを要素に置換する方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら