WordPressのコメントURLを変換するコード

 次のような目的のWebページを作成するコード。

目的：
「https://ドメイン/記事番号/#comment-コメントID」 のような形式のURLを「https://ドメイン/?c=コメントID」に変換する。Webページのフォームに変換前のURLを入力したら自動で変換後のURLが表示されてコピーしやすくなるようなWebページ。

Geminiの提案（一部追加）：

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
    <title>URL変換ツール</title>
    <style>
        .container {
            width: 500px;
            margin: 50px auto;
            text-align: center;
        }

        textarea {
            width: 100%;
            height: 100px;
            margin-bottom: 10px;
            padding: 10px;
            box-sizing: border-box;
        }

        button {
            padding: 10px 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>URL変換ツール</h1>
        <textarea id="inputUrl" placeholder="変換前のURLを入力してください"></textarea>
        <textarea id="outputUrl" placeholder="変換後のURL" readonly></textarea>
        <button id="copyButton">コピー</button>
    </div>
    <script>
        const inputUrl = document.getElementById('inputUrl');
        const outputUrl = document.getElementById('outputUrl');
        const copyButton = document.getElementById('copyButton');

        inputUrl.addEventListener('input', function() {
            const url = inputUrl.value;
            const newUrl = url.replace(/\/[\w\-]+\/#comment-([\w\-]+)/, '/?c=$1');
            outputUrl.value = newUrl;
        });

        copyButton.addEventListener('click', function() {
            outputUrl.select();
            document.execCommand('copy');
            alert('コピーしました！');
        });
    </script>
</body>
</html>

コメント

コメントを投稿