記事等の TOC 生成ブックマークレット

記事やチュートリアルを読み進めるにあたりコンテンツの全体を把握したいと思い、ブックマークレットを作成しました。
実行後、エディター等に貼り付けるとマークダウン形式で見出しの一覧がコピーされます。

javascript:{let h=document.querySelectorAll("h2,h3,h4,h5,h6"),r="";for(let{localName:l,textContent:t}of h)if(t=t.trim())r+="  ".repeat(l.slice(1)-2)+t.replace(/^(?!\d+\.\s)/,"- ")+"\n";navigator.clipboard.writeText(r.trim()).then(()=>alert("目次をコピーしました"))}

(記事ページなどでブックマークレット実行後) ペーストすると以下のような感じになります。
([追記] h1 はページに１つでタイトルと同じなケースが多そうだったので弾きました。)

- h2 のテキスト
  - h3 のテキスト
    - h4 のテキスト
  - h3 のテキスト
    1. 番号付き見出しのテキスト
    2. 番号付き見出しのテキスト

簡素化のため、番号付き見出しは箇条書きなしに、また、テキストが無い物は弾いてます。

上記のコードは手動で minify 済みですが、元の JS Code は以下になります。
使えそうだったら必要に応じて調整ください。

const headings = document.querySelectorAll("h2, h3, h4, h5, h6");
let result = "";

for (let { localName, textContent } of headings) {
	textContent = textContent.trim();

	if (textContent) {
		const indent = "  ".repeat(localName.slice(1) - 2);
		const marker = text.match(/^\d+\. /) ? "" : "- ";
		result += indent + marker + text + "\n"; // 改行追加
	}
}

result = result.trim(); // 最後の改行削除


// Actions

// a. 自動コピー
navigator.clipboard.writeText(result).then(() => alert("目次をコピーしました"));

// b. 自分でコピペしたい場合
prompt("見出し一覧", result);

// c. 確認したいだけの場合
alert(result);

セレクタを変更すれば h2, h3 などにも簡単に絞れます。
以下のような感じで prompt で対象の要素を確認させたりもできます。

const headings = document.querySelectorAll(
	prompt("Selector", "h2, h3, h4, h5, h6")
);

Trello のチェックリスト用

Trello で進捗管理したくなったので、マークダウン形式を解除して特定の見出し (デフォルトは h2) だけ抜き出すパターンも用意しました。

javascript:{navigator.clipboard.writeText(Array.from(document.querySelectorAll(prompt("Selector","h2"))).map(({textContent:t})=>((t=t.trim())?t+"\n":"")).join("").trim()).then(()=>alert("見出しをコピーしました"))}

結果を Trello のチェックリスト入力欄に貼り付けると、簡単にリスト生成できます。
元のコードも一応。

navigator.clipboard
	.writeText(
		// 主な処理コード 
		Array.from(document.querySelectorAll(prompt("Selector", "h2")))
			.map(({ textContent: t }) => ((t = t.trim()) ? t + "\n" : ""))
			.join("")
			.trim(),
	)
	.then(() => alert("見出しをコピーしました"));