2011-02-03 19 views
24

Come sostituire una stringa in jQuery?Sostituisci il testo nella pagina HTML con jQuery

Diciamo che ho una stringa "-9o0-9909" e voglio sostituirla con un'altra stringa.

+1

possibile duplicato di [Come sostituire un blocco di HTML con un altro blocco di HTML utilizzando jQuery] (http://stackoverflow.com/questions/2734174/how-to-replace-a-block-of-html-with -un altro-blocco-di-html-using-jquery) prima di fare una domanda, è bene controllare i suggerimenti automatici che il sistema fa quando si immette il titolo di una domanda –

+0

puoi elaborare per favore perché pensi che jquery sia la strada da percorrere - le risposte finora potrebbero essere fuori strada. – Xhalent

+0

Posso modificare il testo in pagine C#, javascript e database e pagine html, ma stavo pensando se è possibile farlo utilizzando jquery dopo il caricamento della pagina. Sto cercando di salvare a volte e imparare qualcosa di nuovo :) – Developer

risposta

53

è possibile utilizzare il seguente per sostituire la prima occorrenza di una parola all'interno del corpo della pagina:

var replaced = $("body").html().replace('-9o0-9909','The new string'); 
$("body").html(replaced); 

Se si voleva sostituire tutte le occorrenze di un parola, è necessario utilizzare regex e dichiararlo globale /g:

var replaced = $("body").html().replace(/-1o9-2202/g,'The ALL new string'); 
$("body").html(replaced); 

Se si voleva un uno di linea:

$("body").html($("body").html().replace(/12345-6789/g,'<b>abcde-fghi</b>')); 

Tu sei fondamentalmente prendendo tutto il codice HTML all'interno dei <body> tag della pagina in una variabile stringa, usando replace() per trovare e cambiare la prima occorrenza del trovato stringa con una nuova stringa. O se vuoi trovare e sostituire tutte le occorrenze della stringa, introduce una piccola regex al mix.

See a demo here - guarda l'HTML in alto a sinistra per vedere il testo originale, il jQuery in basso e l'output in basso a destra.

+0

Codice che ha funzionato bene, grazie scoobler. jQuery (function ($) { var sostituito = $ ("body"). html(). replace (/ 12212-522-1212/ig, "2121-2121-0000"); $ ("corpo"). html (sostituito); }); – Developer

+3

Non penso che sia abbastanza efficace ... dovremmo cercare una soluzione migliore ragazzi! –

+6

Questa soluzione non è buona, perché cambia il DOM HTML. sta sostituendo l'HTML completo, quindi tutto sulla pagina è stato reinserito, va bene per un sito semplice, ma se hai un sacco di javascript si romperanno, dato che il DOM è cambiato. –

13

... Ho una stringa "-9o0-9909" e voglio sostituirla con un'altra stringa.

Il codice riportato di seguito lo farà.

var str = '-9o0-9909'; 

str = 'new string'; 

Gli scherzi a parte, la sostituzione dei nodi di testo non è banale con JavaScript.

Ho scritto un post su questo: Replacing text with JavaScript.

+5

Non so perché la tua risposta non è stata accettata. –

+1

Il codice al tuo collegamento gestisce * quasi * tutti i casi. Per me, era in virgola su '
' nel set ('child' è' null'), e sarebbe anche inspiegabilmente in crash su 'splitText' di tanto in tanto con" split offset supera la lunghezza del nodo di testo ". Inoltre, "canvas" è scritto erroneamente come "cavas". Ancora, +1 però. – bishop

+0

@bishop Grazie, ho sicuramente bisogno di aggiornare quel post. – alex

1
$("#elementID").html("another string"); 

http://api.jquery.com/html/

+0

non sono sempre lo stesso id potrebbe essere diverso nome di classe o nome id. Se avessi solo un nome di classe o un nome di identificazione, non sarebbe difficile ma è casuale per la maggior parte del tempo. – Developer

+0

Quindi vuoi cercare l'intera struttura HTML per una stringa e sostituirla? – vicvicvic

+0

sì, più che sto pensando – Developer

1
var replaced = $("body").html().replace(/-1o9-2202/g,'The ALL new string'); 
$("body").html(replaced); 

per la variabile:

var replaced = $("body").html().replace(new RegExp("-1o9-2202", "igm"),'The ALL new string'); 
$("body").html(replaced); 
+0

Infine la golosa sostituzione multilinea! Mi hai salvato il culo oggi! –

2

Partenza Padolsey's article on DOM find and replace, così come the library to implement the described algorithm.

In questo esempio dell'uso, sostituisco tutto il testo all'interno di una <div id="content"> che assomiglia a un numero di telefono degli Stati Uniti con un link tel: schema:

findAndReplaceDOMText(document.getElementById('content'), { 
    find:/\b(\d\d\d-\d\d\d-\d\d\d\d)\b/g, 
    replace:function (portion) { 
     var a = document.createElement('a'); 
     a.className = 'telephone'; 
     a.href = 'tel:' + portion.text.replace(/\D/g, ''); 
     a.textContent = portion.text; 
     return a; 
    } 
}); 
+0

sembra essere la soluzione più completa finora, grazie! – leitasat

5

L'html sostituire idea è buona, ma se fatto al documento. corpo, la pagina lampeggia e gli annunci scompaiono.

La mia soluzione:
$("*:contains('purrfect')").each(function() { var replaced = $(this).html().replace(/purrfect/g, "purrfect"); $(this).html(replaced); });

24

Come altri menzionati in questo thread, sostituendo l'intero corpo HTML è una cattiva idea, perché reinserisce l'intera DOM e può potenzialmente rompere qualsiasi altro JavaScript che agiva su quegli elementi.

Invece, sostituire solo il testo nella pagina e non gli stessi elementi DOM utilizzando jQuery filter:

$('body :not(script)').contents().filter(function() { 
    return this.nodeType === 3; 
    }).replaceWith(function() { 
     return this.nodeValue.replace('-9o0-9909','The new string'); 
    }); 

this.nodeType è il tipo di nodo stiamo cercando di sostituire il contenuto di. nodeType 3 è testo. See the full list here.

Problemi correlati