第1段落にはユニークという単語が含まれています。
第2段落には含まれていません。
第3段落にも含まれていません。
第4段落と第5段落にはユニークという単語が含まれています。これは第4段落です。
第4段落と第5段落にはユニークという単語が含まれています。これは第5段落です。
第1段落にはユニークという単語が含まれています。
第2段落には含まれていません。
第3段落にも含まれていません。
第4段落と第5段落にはユニークという単語が含まれています。これは第4段落です。
第4段落と第5段落にはユニークという単語が含まれています。これは第5段落です。
この例では、準備をしただけで、ボタンを押してもハイライトはしません。
ex18-09-1を参照してください。
function highlightParas(containing) { if(typeof containing === 'string') containing = new RegExp(`${containing}`); const paras = document.getElementsByTagName('p'); for(let p of paras) { if(!containing.test(p.textContent)) continue; //含まれていない p.classList.add('highlight'); // クラスを付加 } } function removeParaHighlights() { const paras = document.getElementsByTagName('p'); // const paras = document.querySelectorAll('p.highlight'); // これも可 for(let p of paras) { p.classList.remove('highlight'); } } // #@@range_begin(list1) const highlightActions = document.querySelectorAll('[data-action="highlight"]'); // #@@range_end(list1) console.log(highlightActions[0].dataset); // DOMStringMap { containing: "ユニーク", action: "highlight" }