JQueryを使用してHTMLページの特定の文字列を置き換える

Question

インポートして他の誰かのページに表示するHTMLコンテンツのblobを提供しています。ページの所有者はコンテンツBLOBの周りにタイトルを付けますが、タイトルは、ユーザーに表示するユーザーフレンドリな名前ではなく、コンテンツを提供するWebサービスの名前です。彼らは最後にタイトルを変更する方法を理解できません。私たちのウェブサービスの名前を変更したくないので、数日でデモに適している必要があります。

理想的な解決策は、ポータルツールを使用してタイトルをカスタマイズする方法を理解することですが、それはデモの前には起こりそうにありません。そのため、送信するコンテンツにJavaScriptを含めて、タイトルを変更できると考えていました。これは、彼らが何をしているのかを理解するのに時間を費やすでしょう。

タイトルのコードは次のようになります：

<div class="titleClass"> Bad Title </div>

「悪いタイトル」を置き換えたい「良いタイトル」で。 jQueryセレクターを使用してページ上でこのテキストを検索したいのですが、残念ながらtitleClassのクラスを持つ複数のdivアイテムがあり、そのうちの1つだけを変更したいのですが、...使用できるセレクターもあります「不正なタイトル」というテキストを確認してください。 divタグの中に？または、ページ上のすべての異なるタイトルをループする別の関数を作成し、各タイトルをテストして「悪いタイトル」が含まれているかどうかを確認する必要がありますか？ 2番目を行う必要がある場合、共有するサンプルコードはありますか？

Answer 1

たぶん、もっとシンプルにしたいですか？

$(document).ready( function() {
  $('div.titleClass:contains("Bad Title")').text( "Good title" );
});  

contains セレクターをご覧ください。

Answer 2

最初に、一致するテキストを持つすべての要素のコレクションを取得します：

var $matches = $('div.titleClass').filter(function() {
    return $(this).text() == 'Bad Title';
});

次に、一致する要素のテキストを置き換えます：

$matches.each(function() {
    $(this).text('New Title');
});

上記は、「悪いタイトル」と完全に一致するテキスト を持つ要素を探します。 「悪いタイトル」というテキストを含む要素が必要な場合、たとえば「悪いタイトル」、 indexOf または search を使用する必要があります。例：

return $(this).text().indexOf('Bad Title') > -1;

最後の警告は、大文字と小文字の区別です。大文字と小文字を区別しない一致を行いたい場合は、次のようなものをお勧めします。

// the div contains Bad Title of whatever case
return $(this).text().search(/Bad Title/i) > -1;

// the div exactly matches Bad Title of whatever case
return $(this).text().search(/Bad Title/i) > == 0;