Replace sottostringa in string html

**loop4633** · 10-02-2016, 18:29

Ciao a tutti, ho un problema che probabilmente per la maggior parte di voi sarà semplicissimo ma ci sto ammattendo. Cerco di semplificare altrimenti non ne usciamo più, dunque io ho:

codice HTML:

<!DOCTYPE html><html><body>
<p>Click the button to replace "blue" with "red" in the paragraph below:</p>
<p id="demo"><div id="fuorviante">Mr Blue has a 'blue' blue house and a blue car.</div></p>
<button onclick="myFunction()">Try it</button>
<script>function myFunction() {    var str = document.getElementById("demo").innerHTML; alert(str);    var res = str.replace(/\'blue\'/g, "\'red\'");alert(res);    document.getElementById("demo").innerHTML = res;}</script>
</body></html>

non riesco a sostituire la parola 'blue' con 'red', probabilmente perchè trova i caratteri <div etc
qualcuno sa aiutarmi?
Grazie anticipate

**lucavizzi** · 10-02-2016, 18:59

Originariamente inviata da loop4633

Ciao a tutti, ho un problema che probabilmente per la maggior parte di voi sarà semplicissimo ma ci sto ammattendo. Cerco di semplificare altrimenti non ne usciamo più, dunque io ho:

codice HTML:

<!DOCTYPE html><html><body>
<p>Click the button to replace "blue" with "red" in the paragraph below:</p>
<p id="demo"><div id="fuorviante">Mr Blue has a 'blue' blue house and a blue car.</div></p>
<button onclick="myFunction()">Try it</button>
<script>function myFunction() {    var str = document.getElementById("demo").innerHTML; alert(str);    var res = str.replace(/\'blue\'/g, "\'red\'");alert(res);    document.getElementById("demo").innerHTML = res;}</script>
</body></html>

non riesco a sostituire la parola 'blue' con 'red', probabilmente perchè trova i caratteri <div etc
qualcuno sa aiutarmi?
Grazie anticipate

L'elemento <p> non consente al suo interno elementi con display:block (il div ha, di default, il display:block).
Se usi lo strumento di analisi, noterai che il paragrafo con id "demo", risulta vuoto ed il div con id "fuorviante" è subito sotto.
Di conseguenza, tutti i tuoi alert sono nulli.

**loop4633** · 11-02-2016, 11:01

Originariamente inviata da lucavizzi

L'elemento <p> non consente al suo interno elementi con display:block (il div ha, di default, il display:block).
Se usi lo strumento di analisi, noterai che il paragrafo con id "demo", risulta vuoto ed il div con id "fuorviante" è subito sotto.
Di conseguenza, tutti i tuoi alert sono nulli.

Ciao, intanto grazie per la tua risposta, quindi io avendo per oggetto una stringa che contiene tanto codice html in cui sono presenti tanti tag come div, input, p,a etc etc e voglio sostituire del testo all'interno non posso farlo?

**lucavizzi** · 11-02-2016, 11:06

Originariamente inviata da loop4633

Ciao, intanto grazie per la tua risposta, quindi io avendo per oggetto una stringa che contiene tanto codice html in cui sono presenti tanti tag come div, input, p,a etc etc e voglio sostituire del testo all'interno non posso farlo?

Se la tua stringa contiene codice HTML valido non avrai nessun problema.
Nel caso specifico basta che l'id "demo" diventi un div.

**loop4633** · 11-02-2016, 11:22

Originariamente inviata da lucavizzi

Se la tua stringa contiene codice HTML valido non avrai nessun problema.
Nel caso specifico basta che l'id "demo" diventi un div.

Inutile dirti che hai perfettamente ragione e funziona con quel semplice esempio, ma in un caso di questo perchè diavolo non va?

codice HTML:

<!DOCTYPE html>
<html>
<body>

<div id='selectm1' class='form-group'>
<div class = 'control-label col-md-2' style='font-weight: bold'> Tipo Motivazione </div>
<div class='col-md-10'>
<select id='TipoMotivazione1' name='TipoMotivazione1' class='form-control' onchange='getMotivazioni(1);'>
<option value=''> 
</option><option value='Test1'>Test1 </option>
<option value='Test2'>Test2 </option>
</select>
<input type='button' value='X' name='Xmt1' id='Xmt1' onclick='removefieldm(1);' style='margin-bottom:5px;' />
<div id='Moti1' class='form-group'>
</div></div></div>

<div id='selectm2' class='form-group'>
<div class = 'control-label col-md-2' style='font-weight: bold'> Tipo Motivazione </div>
<div class='col-md-10'>
<select id='TipoMotivazione2' name='TipoMotivazione2' class='form-control' onchange='getMotivazioni(2);'>
</option><option value='Test1'>Test1 </option>
<option value='Test2'>Test2 </option>
</select>
<input type='button' value='X' name='Xmt2' id='Xmt2' onclick='removefieldm(2);' style='margin-bottom:5px;' />
<div id='Moti2' class='form-group'>
</div></div></div>

<div id='selectm3' class='form-group'>
<div class = 'control-label col-md-2' style='font-weight: bold'> Tipo Motivazione </div>
<div class='col-md-10'>
<select id='TipoMotivazione3' name='TipoMotivazione3' class='form-control' onchange='getMotivazioni(3);'>
</option><option value='Test1'>Test1 </option>
<option value='Test2'>Test2 </option>
</select>
<input type='button' value='X' name='Xmt3' id='Xmt3' onclick='removefieldm(3);' style='margin-bottom:5px;' />
<div id='Moti3' class='form-group'>
</div></div></div>



<button onclick='myFunction()'>Try it</button>

<script>
function myFunction() {
var i = 1;
var oldMotiv = [];
        for (i = 1; i < 4; i++) {
            oldMotiv[i] = document.getElementById('selectm' + i).innerHTML; //salvo l'oggetto e poi provo a ristamparlo uguale
           
        }



var j=2;
alert(oldMotiv[j]);

oldMotiv[j].replace(/\'TipoMotivazione2\'/g, "ciao");


alert(oldMotiv[j]);

}
</script>

</body>
</html>

**lucavizzi** · 11-02-2016, 11:33

Hai notato che nel primo alert, quello che tu metti nell'HTML con apici singoli viene mostrato con apici doppi?

Poi, quando esegui il replace non salvi il risultato da nessuna parte.

Prova così:

codice:

oldMotiv[j]=oldMotiv[j].replace(/\"TipoMotivazione2\"/g, "ciao");

**loop4633** · 11-02-2016, 11:57

Originariamente inviata da lucavizzi

Hai notato che nel primo alert, quello che tu metti nell'HTML con apici singoli viene mostrato con apici doppi?

Poi, quando esegui il replace non salvi il risultato da nessuna parte.

Prova così:

codice:

oldMotiv[j]=oldMotiv[j].replace(/\"TipoMotivazione2\"/g, "ciao");

prima avevo l'alert direttamente come alert(oldMotiv[j].replace(/\"TipoMotivazione2\"/g, "ciao"));

ora ovviamente non mi faceva vedere più niente non assegnando la modifica
Grazie duemila

**loop4633** · 11-02-2016, 18:11

codice:

oldMotiv[j]=oldMotiv[j].replace(/\"TipoMotivazione2\"/g, "ciao");

e se avessi bisogno di rimpiazzare ad esempio "TipoMotivazione + j" con "ciao + (j-1)" come posso fare per concatenargli il valore della variabile?

**loop4633** · 15-02-2016, 17:31

Originariamente inviata da lucavizzi

Hai notato che nel primo alert, quello che tu metti nell'HTML con apici singoli viene mostrato con apici doppi?

Poi, quando esegui il replace non salvi il risultato da nessuna parte.

Prova così:

codice:

oldMotiv[j]=oldMotiv[j].replace(/\"TipoMotivazione2\"/g, "ciao");

Non hai idea di come possa aggiungere alla stringa da cercare il valore di una variabile?

**loop4633** · 15-02-2016, 17:42

Ho risolto con un'espressesione regolare che prende i numeri dopo la stringa e poi la rimpiazzo con cosa voglio! Grazie

Discussione: Replace sottostringa in string html

Strumenti discussione

Ricerca discussione

Visualizza

Replace sottostringa in string html

Permessi di invio