Remplacer une chaîne spécifique sur une page HTML à l'aide de JQuery

Question

Nous fournissons un blob de contenu HTML à importer et à afficher sur la page d'un tiers. Les propriétaires de la page ont mis un titre autour de notre objet blob de contenu, mais le titre est le nom de notre service Web qui fournit le contenu, plutôt qu'un nom convivial que nous souhaitons afficher aux utilisateurs. Ils ne savent pas comment changer le titre de leur côté, nous ne voulons pas changer le nom de notre service Web et celui-ci doit être beau pour une démonstration dans quelques jours.

La solution idéale serait qu'ils sachent comment utiliser leur outil de portail pour pouvoir personnaliser les titres, mais cela ne se produira probablement pas avant la démonstration. Je pensais donc que nous pourrions inclure du code JavaScript dans le contenu que nous leur envoyons, ce qui changerait le titre pour eux. Cela leur donnerait le temps de comprendre ce qu’ils font.

Le code de leur titre ressemble à ceci:

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

Je souhaite remplacer "" titre incorrect "" avec "Bon titre". Je souhaite localiser ce texte sur la page à l'aide d'un sélecteur jQuery, mais malheureusement, il existe plusieurs éléments div avec la classe titleClass et je ne souhaite changer que l'un d'entre eux .... Existe-t-il un sélecteur que je pourrais également utiliser? recherchez le texte "Titre incorrect". dans la balise div? Ou dois-je écrire une fonction distincte qui parcourrait tous les titres de la page et tester chacun d'eux pour voir si elle contient le libellé "Mauvais titre"? Si je dois faire la seconde, est-ce que quelqu'un a un exemple de code à partager?

Answer 1

Peut-être que vous voulez faire plus simple?

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

Regardez le contient le sélecteur .

Answer 2

Commencez par obtenir une collection de tous les éléments avec le texte correspondant:

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

puis remplacez le texte des éléments correspondants:

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

Ce qui précède recherche les éléments dont le texte correspond exactement à "Titre incorrect". Si vous voulez un élément qui contient le texte "Titre incorrect", par exemple. "Un titre incorrect", vous devez utiliser indexOf ou recherche , par exemple:

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

Une dernière mise en garde concerne la sensibilité à la casse. Si vous souhaitez faire une correspondance insensible à la casse, je vous suggérerais quelque chose comme ceci:

// 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;