Jqueryを使った特定語句の自動タグ付与について

前提

ワードプレス記事内の指定した特定語句にjQueryを使って自動で<span>タグとクラスを付与することによって自動で特定語句をハイライト（強調）しています。
このコードはjavascript.js内に記述しており全てのページに反映されます。

実現したいこと

①類似した語句に自動で<span>タグを付与しないようにしたい（これは正直難しい）
②もっと簡単な方法で特定ページでは動作しないようにしたい

発生している問題・エラーメッセージ

①下記例の場合、
"トロ"という語句に<span>タグを付与している場合、
"トトロ"という語句がくると"トロ"だけ反応してしまいトトロのように意図せぬ場所でハイライトされてしまいます。

②数百あるページのうち数ページはハイライトが不要なのですが
javascript.jsに記述してある為、不要でも無効化することができません。
全ての個ページにそれぞれ記述すれば解決しますがハイライトが必要/不必要なページの比率的に現実的ではありません。


### 該当のソースコード

 jQuery().ready(function($)
 {
  $('p').each(function()
  {
   var txt = $(this).html();
   $(this).html(txt
				   .replace(/トロ/g,'<span class = "Ptext">トロ</span>')
				   .replace(/サーモン/g,'<span class = "Ptext">サーモン</span>')
				   .replace(/トト/g,'<span class = "Ptext2">トト</span>')
);
  });
 });

試したこと

①クラス名は適当ですがこの場合、トロという語句に対してPtextで強調したい色やサイズでcssを指定します。
次にトトロで反応しないようにトトという語句に対してPtext2で通常フォントを指定して他の語句も見つけ次第展開していきます。

②ハイライト不要ページ内ではPtextを全てPtext2に書き換えて記述します。

行動規範の内容に同意します

回答2件

javasciprt.jsはどのような方法で読み込んでいるのでしょうか？
読み込む前の段階で、特定のページ以外の場合は読み込ませないという方法がいいのではないかと思います。

単語単位で検索したいなら形態素解析APIを使用して形態素に分解してチェックする手もありますが、少し大げさだと思います。
上の単語検索の例だと単純にマッチする単語の前後がカタカナ以外の場合という条件にすることである程度は弾けると思います。
この場合　大トロは大<span>トロ</span>になりますし、トロサーモンはマッチしないので、期待している挙動には少し足りないかもしれません。

投稿2023/01/16 00:42

gogoweb_ikeda

総合スコア1426

GUPI

2023/01/16 12:36

回答いただきありがとうございます。いただいたアドバイスを参考にヘッダー内に <?php if(!in_category('111')) : ?> <script> </script> <?php endif; ?> を記述して読み込ませないようにしたところ上手くいきました(javascriptでの記述方法は分からないのでphpにしました）ちなみになのですがカテゴリーではなくclassやID別に指定する方法などはあるのでしょうか。単語検索の件はご指摘の通り様々な組み合わせがありますので断念して対象語句を見つけ次第追加していくアナログスタイルで運用しようかと思います。

gogoweb_ikeda

2023/01/17 04:12

考えられる方法としては、読み込ませないページにカスタムフィールドで値を設定しておく。値が存在する投稿はJavascirptを読み込まないという方法と bodyにbody_class関数でクラスを付与する。該当する、しないクラスでjQueryのセレクタを変更するなどが思いつきました。

GUPI

2023/01/19 05:09

回答ありがとうございます。 notでclass名を指定することで対応することにしました。 <?php if(!in_category('111')) : ?> <script> window.addEventListener('DOMContentLoaded', ()=>{ document.querySelectorAll('p:not(.test)').forEach(x=>{

行動規範の内容に同意します

ベストアンサー

最近のブラウザは否定後読みができます

javascript
1<style>
2.Ptext{
3  font-weight:bold;
4color:red;
5}
6</style>
7<script>
8window.addEventListener('DOMContentLoaded', ()=>{
9  document.querySelectorAll('p').forEach(x=>{
10    x.innerHTML=x.innerHTML.replace(/(?<!ト)トロ/g,'<span class = "Ptext">トロ</span>');
11  });
12});
13</script>
14<body>
15<p>このトロはトトロがくれたトロサーモン</p>
16<p>このトトロはトロトロ</p>

投稿2023/01/16 02:20

yambejp

総合スコア114968

GUPI

2023/01/16 12:40

回答いただきありがとうございます。また具体的なコードの添付大変助かりました。こちらのほうが複数のパターンも簡単に登録でき不要なcssも削除できたのでこのコードで運用してみたいと思います。 <script> window.addEventListener('DOMContentLoaded', ()=>{ document.querySelectorAll('p').forEach(x=>{ x.innerHTML=x.innerHTML.replace(/(?<!ト)(?<!ネギ)トロ/g,'<span class = "Ptext">トロ</span>'); }); }); </script>

yambejp

2023/01/16 12:49

トトロとネギトロをはじきたいならこう window.addEventListener('DOMContentLoaded', ()=>{ document.querySelectorAll('p').forEach(x=>{ x.innerHTML=x.innerHTML.replace(/(?<!ト|ネギ)(トロ)/g,'<span class = "Ptext">$1</span>'); }); });

GUPI

2023/01/19 05:12

具体的なコードありがとうございます。おかげ様で他の類似コードも短縮することができました！

行動規範の内容に同意します

あなたの回答