JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでシンタックスハイライトを作成・使用する方法をわかりやすく解説

JavaScriptでシンタックスハイライト（構文強調表示）を作成して使用するには、正規表現とDOM操作を組み合わせるのが一般的です。ここでは、ページ内のリンク（アンカータグ）を自動的に検出し、スタイルを適用して強調表示するサンプルコードを紹介します。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .colorLinks {
        color: rgb(131, 44, 212);
        text-decoration: none;
        font-size: 20px;
        font-weight: bold;
    }
    .setColor {
        margin: 20px;
        padding: 10px;
        border: none;
        font-size: 18px;
        background-color: rgb(226, 43, 89);
        color: white;
    }
</style>
</head>
<body>
<h1>Syntax Highlighting example</h1>
<div class="CodeDiv">
<a href="https://www.google.com">Go to google.com</a>
<a href="https://www.facebook.com">Go to facebook.com</a>
</div>
<button class="setColor" onclick="highlightLinks()">Click Here</button>
<h2>Click the above button to highlight the links</h2>
<script>
    var anchrorRg = /[^<]*(<a href="([^"]+)">([^<]+)<\/a>)/g;
    function highlightLinks() {
        var text = document.querySelector(".CodeDiv").innerHTML;
        text = text.replace(anchrorRg, function() {
            function check(arguments) {
                let tempArr = [];
                tempArr.push(Array.prototype.slice.call(arguments, 2, 4));
                return `<a class="colorLinks" href=${tempArr[0][0]}>${tempArr[0][1]}</a><br>`;
            }
            return check(arguments);
        });
        document.querySelector(".CodeDiv").innerHTML = text;
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、ウィンドウサイズが700pxより大きい場合、次のように表示されます。

JavaScriptでシンタックスハイライトを作成・使用する方法をわかりやすく解説

続いて、「Click Here」ボタンをクリックすると、リンクがハイライト表示されます。

JavaScriptでシンタックスハイライトを作成・使用する方法をわかりやすく解説

コードのポイント

このサンプルの動作の仕組みは以下のとおりです。

まず、正規表現を使ってHTML内のアンカータグ（<a>タグ）とそのhref属性・リンクテキストを抽出します。次に、replace()メソッドのコールバック関数内で、抽出したURLとテキストをもとに新しいリンクを生成し、強調表示用のクラス「colorLinks」を付与します。

ボタンがクリックされるとhighlightLinks()関数が呼び出され、.CodeDiv要素のinnerHTMLが書き換えられることで、リンクが紫色の太字（font-size: 20px）で強調表示され、各リンクの末尾には改行（<br>）が挿入されます。

このように、正規表現による文字列の置換とCSSクラスの付与を組み合わせることで、シンプルなシンタックスハイライト機能をJavaScriptだけで実現できます。

  1. HTMLとJavaScriptで作る重量コンバーター：kgをgに変換する方法

    HTMLとJavaScriptを組み合わせれば、ブラウザ上で動作するシンプルな重量コンバーター（単位変換ツール）を簡単に作成できます。この記事では、キログラム（kg）を入力するとグラム（g）に自動変換して表示するウェイトコンバーターの実装方法を、サンプルコードとともにわかりやすく解説します。 実装コード例 以下のコードをそのままHTMLファイルとして保存し、ブラウザで開くだけで動作します。 <!DOCTYPE html> <html> <head> <style>     body{   

  2. CSSとJavaScriptでアコーディオン（開閉パネル）を作成する方法をわかりやすく解説

    CSSとJavaScriptを組み合わせることで、クリックすると内容が開閉する「アコーディオン（折りたたみパネル）」を簡単に実装できます。本記事では、実際に動作するサンプルコードをもとに、その作成手順と仕組みを詳しく解説します。 アコーディオンの実装例 以下は、HTML・CSS・JavaScriptを使ってアコーディオンを実装した完全なサンプルコードです。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, ini