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>
コメント
コメントを投稿