In questo esempio si crea un elemento div inserendo al suo interno un testo e poi lo si sostituirà con un altro testo. Le possibili applicazioni del metodo presentato sono:
L'argomento che si vuole sostituire può trovarsi delimitato tra una coppia qualsiasi di tag. Un tag di HTML è un contenitore se ha il corrispondente tag di chiusura. Quindi HR e BR non sono contenitori.
Inserire il seguente script nella sezione head della pagina:
<script>
function sostituisci(id,contenuto) {
var contenitore = document.getElementById(id);
contenitore.innerHTML = contenuto;
}
</script>
La funzione sostituisci() riceve due parametri, il valore id dell'elemento contenitore e il testo contenuto.
In questo esempio si crea un link che richiama la funzione che sostituisce il testo contenuto tra i tag div.
Per richiamare la funzione tramite il link, al posto del campo protocollo (http:) viene usato javascrit: e al posto dell'indirizzo della pagina viene usato il nome della funzione.
Nella sezione body inserire il seguente elemento div:
<div
id="sezione1"
style="border-style:solid;
padding:10px;
text-align:center;">
Questo testo verrà sosituito con un click
</div>
<a href="javascript:sostituisci('sezione1','il testo precedente è scomparso')">
fai clic su questo link per cambiare il contenuto.
</a>
L'elemento div in cui il contenuto viene sostituito ha la proprietà id="sezione1" (In una pagina non ci possono essere id uguali).
La funzione sostituisci() viene richiamata con due parametri: 'sezione1' e 'il testo precedente è scomparso'.
Il primo parametro è il valore che possiede l'id dell'elemento div, il secondo parametro è il testo che prenderà il posto di quello originariamente scritto.
In questo esempio si sostituisce il contenuto dell'elemento div con un testo ricevuto da un componente textarea di un form.
Il testo potrebbe essere una pagina con tag di HTML o con definizioni di proprietà di stile. Si potrebbe anche inserire uno script
La funzione deve quindi impedire l'esecuzione di script indesiderati.
Nella sezione script della pagina aggiungere la seguente funzione che, prima di richiamare la funzione sostituisci() si assicura che il nuovo testo non contenga uno script
function noJSscript(it) {
re = /script/ig;
var contenuto = it.value.replace(re,'s.c.r.i.p.t');
sostituisci('sezione2',contenuto);
}
La funzione richiama il metodo replace() sulla stringa ricevuta. Il metodo replace() richiede che vengano specificati 2 parametri. Il primo è la stringa di caratteri da ricercare e sostituire, il secondo parametro è la stringa in cui eseguire la ricerca.
Il primo parametro può essere un oggetto Regular expression la cui sintassi è la seguente:
/stringa/modificatori
La parte /stringa/ rappresenta la sequenza di caratteri da cercare, la parte modificatori è composta da codici che specificano ulteriori criteri di ricerca. Il modificatore i specifica che la sequenza di caratteri cercata non deve distinguere tra maiuscole e minuscole (i: insensitive), mentre il modificatore g specifica che la ricerca deve essere globale, cioè non deve arrestarsi alla prima sequenza trovata.
Nell'esempio precedente, la funzione sostituisce qualsiasi parola "script" con una stessa parola, che però non viene riconosciuta dal browser.
Per ulteriori chiarimenti sull'oggetto regExp consultare w3schools, dove c'è anche l'elenco completo dei modificatori.
Inserire il seguente elemento div nella sezione body, della pagina precedente
<div id="sezione2"
style="border-style:solid; padding:20px;">
Sostituiscimi con altro.
</div>
Poi, nella stessa pagina, inserire un form con una textarea:
<form style="margin:0">
<textarea
cols="36"
rows="4"
name="new"
style="width:350px;"
onchange="noJSscript(this)"
wrap="on">
</textarea>
</form>
L'elemento div in cui si deve sostituire il contenuto ha la proprietà id="sezione2".
Quando il campo textarea viene sostituito viene richiamata la funzione noJSscript().
La funzione noJSscript() ricerca la parola "script" e, ogni volta che la trova, la sostituisce con "s.c.r.i.p.t" per prevenire l'esecuzione di uno script. Dopo richiama la funzione sostituisci() passandole, come primo parametro, 'sezione2' e, come secondo parametro, il contenuto del campo textarea.
In questo esempio si genera un contatore a decremento che si avvia automaticamente e quando raggiunge lo 0 mostra la scritta "BOOM".
Inserire il seguente elemento div nella sezione body della pagina:
<div
id="sezione3"
style="border-style:dotted;
padding:10px;
font-size:24px;
width:200px;
text-align:center;">
cronometro
</div>
Nella sezione script della pagina aggiungere il seguente script:
var IDcontenitore = "sezione3"
var numero = 10
var IDtimer = setInterval("cronometro()",1000)
function cronometro() {
if(numero > 1) {
numero--;
sostituisci(IDcontenitore,numero);
}
else {
clearInterval(IDtimer);
sostituisci(IDcontenitore,'B O O M');
}
}