- ベストアンサー
Jqueryを使った特定語句の自動タグ付与について
- ワードプレス記事内の特定語句にjQueryを使って自動でタグとクラスを付与する方法を学びたい
- 類似した語句に自動でタグを付与しない方法や、特定ページでの無効化方法についても知りたい
- 特定語句のハイライトが意図しない場所で行われてしまう問題や、ハイライトが不要なページの扱いに困っている
- GU-PI
- お礼率25% (7/27)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
<!DOCTYPE html> <title></title> <meta charset="utf-8"> <style> .marker { background: #ff8; color: #800; font-weight: bold; } .marker2 { background: #0f0; color: #040; font-weight: bold; } </style> <body> <section> <p> ①下記例の場合、 "トロ"という語句に＜span＞タグを付与している場合、 "トトロ"という語句がくると"トロ"だけ反応してしまい ト"トロ" のように意図せぬ場所でハイライトされてしまいます。 </p> <p> ②数百あるページのうち数ページはハイライトが不要なのですが javascript.jsに記述してある為、不要でも無効化することができません。 全ての個ページにそれぞれ記述すれば解決しますがハイライトが 必要/不必要なページの比率的に現実的ではありません。 </p> </section> <script> function textMarker (reg, template, root = document.body) { if (arguments.length < 2) throw new Error; const walker = document.createTreeWalker (root, NodeFilter.SHOW_TEXT), tNodes = [ ]; for (let n; n = walker.nextNode (); ) tNodes.push (n); for (let n of tNodes) { let txt = n.nodeValue, fgm = document.createDocumentFragment (), last = reg.lastIndex = 0; for (let a; a = reg.exec (txt); ) { fgm.append ( txt.substring (last, a.index), Object.assign (template.cloneNode (false), {textContent: a[1]}) ); last = reg.lastIndex; } last && fgm.append (txt.substring (last)); fgm.hasChildNodes() && (n.before (fgm), n.remove ()); } } //________________ const DIC = [ /(トロ)/g, /([a-z]+)/g, /(\d+)/g, /([ア-ン]+)/g ], TEMPLATE = Object.assign (document.createElement ('span'), {className: 'marker'}), TEMPLATE2 = Object.assign (document.createElement ('span'), {className: 'marker2'}); DIC.forEach (d=> textMarker (d, TEMPLATE, document.querySelector('section'))); textMarker (/((?:でき|あり)ません)/g, TEMPLATE2); </script>
