【JavaScript】指定した範囲の文字列を選択する方法｜setSelectionRange・Selection API・ハイライト表示まで解説

const input = document.getElementById("myInput");
// 値が "Hello World" のとき

input.focus();              // 選択を表示するためフォーカスする
input.setSelectionRange(6, 11); // 6〜10文字目（"World"）を選択

// 全選択は select() が簡単
input.select();

const input = document.getElementById("myInput");

const start = input.selectionStart; // 選択開始位置
const end = input.selectionEnd;     // 選択終了位置
const selected = input.value.substring(start, end);

console.log(selected); // 選択中の文字列

function selectRange(element, start, end) {
  const node = element.firstChild;
  // 最初の子がテキストノードでなければ中断
  if (!node || node.nodeType !== Node.TEXT_NODE) return false;

  const len = node.textContent.length;
  // 範囲を文字列の長さ内に丸める（範囲外エラー防止）
  const s = Math.max(0, Math.min(start, len));
  const e = Math.max(s, Math.min(end, len));

  const range = document.createRange();
  range.setStart(node, s);
  range.setEnd(node, e);

  const selection = window.getSelection();
  selection.removeAllRanges(); // 既存の選択を解除
  selection.addRange(range);
  return true;
}

// <p id="target">Hello World</p> の 6〜10文字目を選択
const el = document.getElementById("target");
selectRange(el, 6, 11); // "World" が選択される

// ページ全体で現在選択されているテキスト
const text = window.getSelection().toString();
console.log(text);

// 選択が変わるたびに取得する
document.addEventListener("selectionchange", () => {
  const selected = window.getSelection().toString();
  if (selected) console.log("選択中:", selected);
});

function highlight(element, target) {
  if (!target) return; // 空文字だと indexOf が進まず無限ループになるため弾く
  const text = element.textContent;
  element.textContent = ""; // 中身をクリア
  let i = 0;
  let idx;
  while ((idx = text.indexOf(target, i)) !== -1) {
    // ヒット前のテキスト（文字列として安全に追加）
    element.append(text.slice(i, idx));
    // ヒット部分を <mark> で囲む
    const mark = document.createElement("mark");
    mark.textContent = target;
    element.append(mark);
    i = idx + target.length;
  }
  element.append(text.slice(i)); // 残り
}

// <p id="target">JavaScriptでJavaを学ぶ</p>
highlight(document.getElementById("target"), "Java");

const el = document.getElementById("target");
const node = el.firstChild;

const range = new Range();
range.setStart(node, 0);
range.setEnd(node, 4);

const highlight = new Highlight(range);
CSS.highlights.set("search-result", highlight); // 名前を付けて登録

::highlight(search-result) {
  background-color: #fef08a;
  color: #000;
}

async function selectAndCopy(input) {
  input.focus();
  input.select(); // = setSelectionRange(0, value.length)

  // モダンな Clipboard API（推奨）
  try {
    await navigator.clipboard.writeText(input.value);
    console.log("コピーしました");
  } catch (e) {
    // 古い環境のフォールバック（非推奨だが互換用）
    document.execCommand("copy");
  }
}

const code = document.getElementById("coupon");
code.addEventListener("click", () => selectAndCopy(code));