ブラウザ：ブックマークにJavaScriptを仕込み、画面内の「数字だけ」を全部ハイライト🔦

ブラウザのブックマークは、URLだけでなく JavaScriptも登録できるのを知っていますか？これを使うと、クリックするだけで処理が動く「自分専用ボタン」が作れます。

今回は、ページ内の数字を一発でハイライトするボタンを作ります。

仕組み：ブックマークレット（Bookmarklet）

ブックマークのURL欄に javascript: ... を入れておくと、
そのブックマークをクリックした瞬間に JavaScript が実行されます。

次の JavaScript を使います。長いですが 1行で書かれた JavaScript です。

JavaScript：

javascript:(()=>{let s=document.getElementById("__bm_numhl__");if(!s){s=document.createElement("style");s.id="__bm_numhl__";s.textContent='.__bm_numhl{background:rgba(255,235,59,.75);padding:0 .15em;border-radius:.25em;box-shadow:0 1px 0 rgba(0,0,0,.15)}';document.head.appendChild(s)}let w=window.__bm_numhl_w;try{if(w){w.forEach(n=>{if(n.parentNode){n.parentNode.replaceChild(document.createTextNode(n.textContent),n)}});window.__bm_numhl_w=null;alert("数字ハイライト解除");return}}catch(e){}let walker=document.createTreeWalker(document.body,NodeFilter.SHOW_TEXT,{acceptNode:n=>{if(!n.nodeValue||!/\d/.test(n.nodeValue))return NodeFilter.FILTER_REJECT;let p=n.parentElement;if(!p)return NodeFilter.FILTER_REJECT;let t=p.tagName;if(/^(SCRIPT|STYLE|TEXTAREA|INPUT|CODE|PRE)$/.test(t))return NodeFilter.FILTER_REJECT;return NodeFilter.FILTER_ACCEPT}});let nodes=[],n;while(n=walker.nextNode())nodes.push(n);let wraps=[];nodes.forEach(tn=>{let v=tn.nodeValue;let parts=v.split(/(\d[\d,.\-:\/]*)/);if(parts.length===1)return;let frag=document.createDocumentFragment();let hit=false;for(let i=0;i<parts.length;i++){let p=parts[i];if(!p)continue;if(i%2===1){let sp=document.createElement("span");sp.className="__bm_numhl";sp.textContent=p;frag.appendChild(sp);wraps.push(sp);hit=true}else frag.appendChild(document.createTextNode(p))}if(hit&&tn.parentNode)tn.parentNode.replaceChild(frag,tn)});window.__bm_numhl_w=wraps;alert("数字をハイライトしました（もう一度押すと解除）")})();