HTMLからリンクや画像URLを抽出したい | 正規表現

このプログラムでは、JavaScriptの正規表現を使用して、HTMLからリンク（href）や画像（src）のURLを抽出します。

INDEX

リンクや画像URL抽出プログラム
1. HTMLとJavaScriptコード
2. プログラムの解説
RegExpオブジェクトメソッドの機能一覧
Stringオブジェクトメソッドの機能一覧

リンクや画像URL抽出プログラム

以下のコードでは、以下のHTML内にあるリンクと画像のURLを抽出しています。

<a href=”https://example.com”>リンク</a>
<img src=”https://example.com/image.jpg” alt=”画像”>
<a href=”https://another.com”>別のリンク</a>

HTMLとJavaScriptコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>HTMLからリンクや画像URLを抽出する方法</title>
    <script>
        window.onload = function() {
            // HTMLからリンクや画像のURLを抽出する関数
            function extractURLs(html) {
                // リンク（href）と画像（src）のURLを抽出する正規表現
                const pattern = /(?:href|src)="([^"]+)"/g;
                const matches = [];
                let match;
                // 正規表現にマッチする全てのURLを抽出
                while ((match = pattern.exec(html)) !== null) {
                    matches.push(match[1]);  // URLを配列に追加
                }
                return matches;
            }

            // テスト用のHTML文字列
            const htmlString = `
                <a href="https://example.com">リンク</a>
                <img src="https://example.com/image.jpg" alt="画像">
                <a href="https://another.com">別のリンク</a>
            `;

            // HTMLからリンクや画像のURLを抽出
            const result = extractURLs(htmlString);

            // 結果をHTMLに表示
            document.getElementById('result').textContent = result.join(', ');
        }
    </script>
</head>
<body>

    <h1>HTMLからリンクや画像URLを抽出する方法</h1>

    <div id="result"></div>

</body>
</html>