質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

489閲覧

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

GUPI

総合スコア1

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2023/01/15 08:17

前提

ワードプレス記事内の指定した特定語句に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に書き換えて記述します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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=>{
guest

0

ベストアンサー

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

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

総合スコア114789

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問