Reactで、選んだ文に直接飛べるリンクを作る方法

https://example.com/#:~:text=[prefix-,]textStart[,textEnd][,-suffix]

encodeURIComponent('well-known, A&B') => "well-known%2C%20A%26B"
encodeTextPart('well-known, A&B') => "well%2Dknown%2C%20A%26B"

Intl.Segmenter ja => "猫|の|手|も|借り|たい|ほど|忙しい|日|に|、|ブラウザ|の|機能|を|試し|ま|した|。"
snapToWords（'ラウザ' を選んだ場合） => "ブラウザ"
snapToWords（'しい日' を選んだ場合） => "忙しい日"

:~:text=になると、-,猫は窓辺で眠ります。,-夜には

// textFragment.ts
// 「-」「&」「,」は text= の区切りに使われるので、文字として含むときも % の形にする
export function encodeTextPart(text: string): string {
  return encodeURIComponent(text).replace(/-/g, '%2D');
}

export type TextDirective = {
  start: string;
  end?: string;
  prefix?: string;
  suffix?: string;
};

// #:~:text=[prefix-,]start[,end][,-suffix] の形にする
export function buildTextFragmentUrl(baseUrl: string, d: TextDirective): string {
  const url = new URL(baseUrl);
  url.hash = '';
  const parts = [
    d.prefix ? `${encodeTextPart(d.prefix)}-` : '',
    encodeTextPart(d.start),
    d.end ? encodeTextPart(d.end) : '',
    d.suffix ? `-${encodeTextPart(d.suffix)}` : '',
  ].filter(Boolean);
  return `${url.href}#:~:text=${parts.join(',')}`;
}

// 選んだ範囲 [from, to) を、単語の切れ目まで広げる
export function snapToWords(text: string, from: number, to: number, locale = 'ja'): [number, number] {
  const seg = new Intl.Segmenter(locale, { granularity: 'word' });
  let start = from;
  let end = to;
  for (const s of seg.segment(text)) {
    const sEnd = s.index + s.segment.length;
    if (s.index < from && from < sEnd) start = s.index;
    if (s.index < to && to < sEnd) end = sEnd;
  }
  return [start, end];
}

const countOf = (haystack: string, needle: string) => {
  const h = haystack.toLowerCase();
  const n = needle.toLowerCase();
  let count = 0;
  for (let i = h.indexOf(n); i !== -1; i = h.indexOf(n, i + 1)) count++;
  return count;
};

// 選んだ文の前後から、単語を max 個まで取る（空白と記号だけの区切りは数えない）
function wordsAround(text: string, from: number, to: number, locale: string, max = 3) {
  const segs = [...new Intl.Segmenter(locale, { granularity: 'word' }).segment(text)];
  const before = segs.filter((s) => s.index + s.segment.length <= from);
  const after = segs.filter((s) => s.index >= to);
  const take = (list: Intl.SegmentData[]) => {
    const out: Intl.SegmentData[] = [];
    for (const s of list) {
      out.push(s);
      if (out.filter((x) => x.isWordLike).length >= max) break;
    }
    return out;
  };
  const pre = take(before.reverse()).reverse();
  const suf = take(after);
  return {
    prefix: pre.map((s) => s.segment).join('').trim(),
    suffix: suf.map((s) => s.segment).join('').trim(),
  };
}

const LONG = 40; // これより長い文は、先頭と末尾だけを start と end にする

// ブロックの文字列 blockText のうち [from, to) を指す text= を作る
// pageText は、同じ文字列がほかにもあるかを数えるためのページ全体の文字列
export function directiveFor(
  blockText: string,
  from: number,
  to: number,
  pageText: string,
  locale = 'ja',
): TextDirective | null {
  const [s, e] = snapToWords(blockText, from, to, locale);
  const raw = blockText.slice(s, e);
  const lead = raw.length - raw.trimStart().length;
  const trail = raw.length - raw.trimEnd().length;
  const start = s + lead;
  const end = e - trail;
  const selected = blockText.slice(start, end);
  if (!selected) return null;

  let d: TextDirective = { start: selected };
  if (selected.length > LONG) {
    const [, headEnd] = snapToWords(blockText, start, start + 15, locale);
    const [tailStart] = snapToWords(blockText, end - 15, end, locale);
    const head = blockText.slice(start, headEnd).trim();
    const tail = blockText.slice(tailStart, end).trim();
    const rest = blockText.slice(headEnd, end);
    // end の文字列が途中にも出てくると、そこで終わってしまうので使わない
    if (head && tail && tailStart > headEnd && rest.toLowerCase().indexOf(tail.toLowerCase()) === rest.length - tail.length) {
      d = { start: head, end: tail };
    }
  }
  if (countOf(pageText, d.start) > 1) {
    d = { ...d, ...wordsAround(blockText, start, end, locale) };
    if (!d.prefix) delete d.prefix;
    if (!d.suffix) delete d.suffix;
  }
  return d;
}

:~:text=長い文を選んだときは、文の始まり,探すので、URLが短くなります。

// useSelectionLink.ts
import { useEffect, useState, type RefObject } from 'react';
import { buildTextFragmentUrl, directiveFor } from './textFragment';

const BLOCK = 'p, li, h1, h2, h3, h4, blockquote, figcaption, td, th';

export type SelectionLink = { text: string; url: string } | { error: string } | null;

export function useSelectionLink(rootRef: RefObject<HTMLElement | null>, locale = 'ja'): SelectionLink {
  const [link, setLink] = useState<SelectionLink>(null);

  useEffect(() => {
    const update = () => {
      const root = rootRef.current;
      const sel = document.getSelection();
      if (!root || !sel || sel.rangeCount === 0 || sel.isCollapsed) return setLink(null);
      const range = sel.getRangeAt(0);
      if (!root.contains(range.commonAncestorContainer)) return setLink(null);

      const block = (n: Node) => (n instanceof Element ? n : n.parentElement)?.closest(BLOCK);
      const startBlock = block(range.startContainer);
      if (!startBlock || startBlock !== block(range.endContainer)) {
        return setLink({ error: '1つの段落の中で選んでください' });
      }
      // 段落の先頭から、選んだ範囲の始まりと終わりまでの文字数
      const toOffset = (node: Node, offset: number) => {
        const r = document.createRange();
        r.setStart(startBlock, 0);
        r.setEnd(node, offset);
        return r.toString().length;
      };
      const from = toOffset(range.startContainer, range.startOffset);
      const to = toOffset(range.endContainer, range.endOffset);
      const d = directiveFor(startBlock.textContent ?? '', from, to, root.textContent ?? '', locale);
      if (!d) return setLink(null);
      setLink({ text: sel.toString(), url: buildTextFragmentUrl(location.href, d) });
    };
    document.addEventListener('selectionchange', update);
    return () => document.removeEventListener('selectionchange', update);
  }, [rootRef, locale]);

  return link;
}

// ShareSelection.tsx
import { useRef, useState, useSyncExternalStore, type ReactNode } from 'react';
import { useSelectionLink } from './useSelectionLink';

// 対応しているかは途中で変わらないので、購読する処理は何もしない
const subscribe = () => () => {};

// サーバーでは「対応している」として描き、hydrate で表示が食い違わないようにする
const useSupported = () =>
  useSyncExternalStore(
    subscribe,
    () => 'fragmentDirective' in document,
    () => true,
  );

export function ShareSelection({ children }: { children: ReactNode }) {
  const rootRef = useRef<HTMLDivElement>(null);
  const link = useSelectionLink(rootRef);
  const [copied, setCopied] = useState(false);
  const supported = useSupported();

  const copy = async (url: string) => {
    await navigator.clipboard.writeText(url);
    setCopied(true);
  };

  return (
    <>
      <div ref={rootRef} onPointerDown={() => setCopied(false)}>
        {children}
      </div>
      <div className="share-bar" role="status">
        {!supported && <p>このブラウザは、文へのリンクに対応していません。</p>}
        {link && 'error' in link && <p>{link.error}</p>}
        {link && 'url' in link && (
          <>
            <button
              type="button"
              // ボタンを押したあとも、選んだ範囲を残したままにする
              onMouseDown={(e) => e.preventDefault()}
              onClick={() => copy(link.url)}
            >
              {copied ? 'コピーしました' : '選んだ文へのリンクをコピー'}
            </button>
            <output className="share-url">{link.url}</output>
          </>
        )}
      </div>
    </>
  );
}

::target-text {
  background: #d85878;
  color: #fff;
}