Sostituisci una stringa specifica su una pagina HTML usando JQuery

Question

Stiamo fornendo un blocco di contenuti HTML da importare e visualizzare sulla pagina di qualcun altro. I proprietari della pagina inseriscono un titolo attorno al nostro BLOB di contenuti, ma il titolo è il nome del nostro servizio Web che fornisce il contenuto, piuttosto che un nome intuitivo che vogliamo mostrare agli utenti. Non riescono a capire come cambiare il titolo alla fine, non vogliamo cambiare il nome del nostro servizio web e deve avere un bell'aspetto per una demo in pochi giorni.

La soluzione ideale sarebbe quella di capire come usare il loro strumento portale per personalizzare i titoli, ma è probabile che ciò non accada prima della demo. Quindi stavo pensando che potremmo includere alcuni JavaScript nei contenuti che li inviamo, il che cambierebbe il titolo per loro. Ciò consentirebbe loro di guadagnare tempo per capire cosa stanno facendo.

Il codice per il loro titolo è simile al seguente:

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

Vorrei sostituire " Bad Title " con "buon titolo". Vorrei localizzare questo testo sulla pagina usando un selettore jQuery, ma sfortunatamente ci sono più elementi div con la classe titleClass e voglio solo cambiarne uno .... c'è un selettore che potrei usare che potrebbe anche usare controlla il testo " Bad Title " all'interno del tag div? Oppure devo scrivere una funzione separata che esegua il ciclo attraverso tutti i diversi titoli sulla pagina e testare ciascuno di essi per vedere se contiene "titolo errato"? Se devo fare il secondo, qualcuno ha un codice di esempio da condividere?

Answer 1

Forse vuoi farlo più semplice?

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

Guarda il contiene selettore.

Answer 2

Per prima cosa, ottieni una raccolta di tutti gli elementi con testo corrispondente:

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

e quindi sostituire il testo degli elementi corrispondenti:

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

Quanto sopra cercherà elementi con testo che corrisponda esattamente 'Titolo non valido'. Se desideri un elemento che contiene il testo "Titolo non valido", ad es. "A Bad Title", dovresti usare indexOf o cerca , ad esempio:

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

Un'ultima avvertenza è la distinzione tra maiuscole e minuscole. Se vuoi fare una corrispondenza senza distinzione tra maiuscole e minuscole, suggerirei qualcosa del genere:

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