16進数カラーコードを抽出したい | 正規表現 | JavaScript 目的別リファレンス

このプログラムは、与えられた文字列から16進数カラーコード（例：#FF5733、#C70039など）を抽出するためのものです。正規表現を使用して、6桁または3桁のカラーコードを検出します。

16進数カラーコードを抽出するプログラム

JavaScriptとHTMLコード

置換前文字列:

結果:

        // 16進数カラーコードを抽出する関数
        function extractHexColors(inputString) {
            // 正規表現で16進数カラーコードをマッチ
            const regex = /#([0-9A-Fa-f]{6}|[0-9A-Fa-f]{3})/g;
            return inputString.match(regex); // 一致したカラーコードを配列で返す
        }

        // 実行例
        window.onload = function() {
            const testString = "ここに#FF5733と#C70039のカラーコードがあります。"; // テスト用文字列
            const extractedColors = extractHexColors(testString); // カラーコードの抽出
            document.getElementById('input').innerText = testString; // 置換前のテキスト
            document.getElementById('result').innerText = extractedColors ? extractedColors.join(', ') : "カラーコードは見つかりませんでした。"; // 結果を表示
        };

このプログラムの解説

このプログラムでは、与えられた文字列から16進数のカラーコードを抽出します。具体的には、#で始まる6桁または3桁の数字を検出します。

• 16進数カラーコードは#RRGGBBまたは#RGB形式です。
• 正規表現を使用して、文字列内のカラーコードを検出します。
• マッチしたカラーコードを配列として返します。

使用したオブジェクトとメソッド

• String.match(): 正規表現にマッチする部分を配列で返します。

Stringオブジェクト メソッドの機能一覧

Stringオブジェクト メソッドの機能一覧 | JavaScript リファレンス

JavaScriptのStringオブジェクトは、文字列を操作するための強力なオブジェクトです。文字列はJavaScriptにおいて非常に重要なデータ型であり、文字の並びを表します。Stringオブジェクトは、プリミティブな文字列をラップするオブジェクトであり、文字列に対するさまざまな操作を行うメソッドを提供します。た...

programming-cafe.com