クリップボードにコピーしたテキストを使用しGoogle検索する

2025.01.30

実際の動作

　　

あらかじめ、何かをコピーしてからお使いください。

スポンサーリンク

サンプルコード

<div class="contentbox">
    <button id="readClipboard">検索</button>
    <p id="clipboardContent" type="text"></p>
</div>
<script>
const clipboardContent = document.getElementById("clipboardContent");

// ボタン上にホバーしたときにクリップボードから情報を取得
document.querySelector("#readClipboard").addEventListener("mouseover", async () => {
    try {
        const text = await navigator.clipboard.readText();
        clipboardContent.textContent = text; // 取得したテキストを表示
    } catch (err) {
        clipboardContent.textContent = "クリップボードの取得に失敗しました。";
    }
});

// ボタンをクリックしたときに指定のページに遷移
document.getElementById("readClipboard").addEventListener("click", async () => {
    const query = clipboardContent.textContent; // 取得したテキストを検索クエリとして使用
    const targetUrl = "https://www.google.com/search?q=" + encodeURIComponent(query); // 遷移先のURLを指定
    window.location.href = targetUrl; // ページ遷移
});
</script>
スポンサーリンク

HTML解説

↓HTML.html

<div class="contentbox">
    <button id="readClipboard">検索</button>
    <p id="clipboardContent" type="text"></p>
</div>
<script src="javascript.js"></script>
スポンサーリンク

JavaScript解説

↓javascript.js

const clipboardContent = document.getElementById("clipboardContent");

// ボタン上にホバーしたときにクリップボードから情報を取得
document.querySelector("#readClipboard").addEventListener("mouseover", async () => {
    try {
        const text = await navigator.clipboard.readText();
        clipboardContent.textContent = text; // 取得したテキストを表示
    } catch (err) {
        clipboardContent.textContent = "クリップボードの取得に失敗しました。";
    }
});

// ボタンをクリックしたときに指定のページに遷移
document.getElementById("readClipboard").addEventListener("click", async () => {
    const query = clipboardContent.textContent; // 取得したテキストを検索クエリとして使用
    const targetUrl = "https://www.google.com/search?q=" + encodeURIComponent(query); // 遷移先のURLを指定
    window.location.href = targetUrl; // ページ遷移
});
addEventListener("click", ...)

→ボタンがクリックされたときに実行されるイベントリスナー。

const query = clipboardContent.textContent;

→クリップボードから取得したテキストを検索クエリとして使用します。

encodeURIComponent(query);

→検索クエリをURLエンコードします。これにより、特殊文字が正しく処理されます。

window.location.href = targetUrl;

→指定したURLにページ遷移します。ここではGoogle検索のURLが使用されています。

コメント