Siti Web spesso mostrano effetti speciali dove cambiano colori o forme in risposta alle azioni dell'utente. Utilizzando JavaScript, è possibile anche rendere testo su una pagina Web modificare sostituendo parole in qualsiasi elemento della pagina HTML. Ad esempio, un clic di un pulsante potrebbe modificare tutte le occorrenze della parola "triste" in un'area di testo con la parola "felice". Tutto il necessario per creare questo effetto è una funzione JavaScript che sa come sostituire testo HTML.

Istruzioni

1

Aprire un documento HTML utilizzando blocco note o editor HTML.

2

Aggiungere questo codice sotto tag di apertura "< body >" del documento:

< id h1 = "Heading1" > parola originale nella voce = cane < / h1 >

< tipo input = "pulsante" value = "Sostituire la parola nel titolo"

OnClick = "replaceWord ('Heading1', 'Cane', 'gatto')" / >

< p >< / p >

Questo crea un'intestazione che contiene testo. Il pulsante sotto il titolo chiama una funzione JavaScript. Passa l'ID dell'intestazione, la parola che si desidera sostituire e la parola sostitutiva. In questo esempio, una chiamata alla funzione andrà a sostituire la parola "cane" con il "gatto".

3

Aggiungere il seguente codice sotto il codice illustrato nel passaggio precedente:

< textarea id = "TextArea1" cols = "60" rows = "3" >

La parola originale in TextArea = rosso

< / textarea >

< input type = valore "pulsante" = "Sostituire la parola in TextArea"

OnClick = "replaceWord ('TextArea1', 'rosso', 'blu')" / >

Questo crea un controllo textarea che contiene anche il testo. Il pulsante sotto questo controllo chiama la stessa funzione di JavaScript. Passa l'id del controllo textarea, la parola che si desidera sostituire e la parola sostitutiva.

4

Inserire il codice JavaScript nella sezione "head" del documento:

< script language = "javascript" type = "text/javascript" >

Function replaceWord (controllo, oldWord, newWord) {

var pageElement = document.getElementById(control);

oldWord = new RegExp (oldWord, "g");

Se (pageElement.value)

pageElement.value = pageElement.value.replace(oldWord, newWord);

altro

pageElement.innerHTML = pageElement.innerHTML.replace (oldWord, newWord);

}

< / script >

Questa funzione riceve il nome del controllo passato da uno dei pulsanti, la parola da cercare e la parola sostitutiva. Viene quindi utilizzato il metodo di JavaScript "Sostituisci" per individuare la parola obiettivo e sostituire tutte le occorrenze di quella parola con quello nuovo.

5

Salvare il documento e aprire il browser. Verrà visualizzato il testo originale nei controlli intestazione e textarea.

6

Fare clic sul pulsante "Sostituisci la parola nel titolo." La funzione JavaScript andrà a sostituire la parola "cane" con il "gatto". Fare clic sul pulsante con l'etichetta "Sostituire la parola in TextArea." La stessa funzione cambia la parola "rossa" a "blu".

Consigli & Avvertenze

• Chiamare la funzione di "replaceWord" qualsiasi momento che avete bisogno di sostituire le parole in un controllo. Come mostrato nell'esempio, è necessario passare alla funzione l'ID del controllo che contiene il testo, la parola da cercare e la parola sostitutiva.
• È anche possibile utilizzare questa funzione per capitalizzare parole specifiche in un controllo. Per esempio, si potrebbe cercare la parola "florida" e sostituirlo con "Florida."