Substring JavaScript

In questa lezione impareremo ad utilizzare il metodo substring in JavaScript attraverso alcuni semplici esempi.

Substring JavaScript – primo esempio

Trasformare un nome in minuscolo in uno con iniziale maiuscola utilizzando il metodo substring e anche il metodo toUpperCase.

Come prima cosa occorre inserire in una variabile un nome in minuscolo, ad esempio io ho inserito coding.

Adesso occorre trasformare la prima lettera in maiuscolo.

La prima lettera si estrae indicando semplicemente il primo elemento stringa[0].

Estraiamo poi la sotto-stringa a partire dalla posizione 1, in quanto dobbiamo saltare la posizione 0 che abbiamo appena trasformato in maiuscolo. Il metodo che utilizziamo per fare ciò è substring.

Dopo occorre concatenare le due stringe e lo possiamo fare semplicemente con l’operatore +.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Esempi di istruzioni condizionali</title>
  </head>
  <body>
    <h1>Esempio di istruzioni condizionali</h1>

        <script type="text/javascript">
          var stringa='coding';
          var maiuscola=stringa[0].toUpperCase();
          var resto=stringa.substring(1);
          var unita=maiuscola + resto;
          document.write('La stringa modificata è: ' + unita);
        </script>

   </body>
</html>

Substring JavaScript – secondo esempio

In questo secondo esempio estraiamo la prima lettera del nome, la prima lettera del cognome inseriti in input e li trasformiamo, in modo da avere la prima lettera sempre in maiuscolo e tutto il resto in minuscolo.

Quando l’utente avrà inserito i dati e avrà fatto clic su ok, richiamerà la funzione trasforma che provvederà a trasformare i dati così come indicato.

Per realizzare questo esempio ci servono i metodi toUpperCase e substring.

Ecco dunque il codice completo:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Esempi di substring</title>
  </head>
  <body>
    <h1>Esempio di substring</h1>
    <label>Inserisci il nome: </label><input type="text" id="nome">
    <label>Inserisci il cognome: </label><input type="text" id="cognome">
    <input type="button" id="ok" value="ok" onclick="trasforma()">
    <p id="risultato"></p>

        <script type="text/javascript">
        function trasforma() {
          var nome = document.getElementById("nome").value;
          nome=nome[0].toUpperCase()+nome.substring(1);
          var cognome = document.getElementById("cognome").value;
          cognome=cognome[0].toUpperCase()+cognome.substring(1);
          document.getElementById("risultato").innerHTML ="Nome e Cognome: " + nome + ' ' + cognome;
        };
        </script>

   </body>
</html>

Substring JavaScript – Terzo esempio

In questo esempio vedremo come estrarre gli ultimi due caratteri di una stringa utilizzando il metodo substring.

Chiaramente daremo per certo che l’utente inserisca una parola più lunga di 2 lettere. Se l’utente inserisce una stringa di 1 solo carattere verrà comunque restituito quest’ultimo.

Ecco dunque il codice completo:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Esempi di substring</title>
  </head>
  <body>
    <h1>Esempio di substring</h1>
    <label>Inserisci il nome: </label><input type="text" id="nome">
    <input type="button" id="ok" value="ok" onclick="trasforma()">
    <p id="risultato"></p>

        <script type="text/javascript">
        function trasforma() {
          var nome = document.getElementById("nome").value;
          var len=nome.length;
          ultima_lettera=nome.substring(len-2);
          document.getElementById("risultato").innerHTML =ultima_lettera;
        };
        </script>

   </body>
</html>

Chiaramente si potrebbe fare un controllo in modo da permettere l’inserimento di almeno due caratteri di testo.

Alcuni link utili

Indice tutorial JavaScript

Introduzione al tutorial JavaScript

Il linguaggio JavaScript

Come utilizzare JavaScript alert

Come utilizzare JavaScript confirm

Utilizzare JavaScript prompt

Variabili e costanti in JavaScript

Autore dell'articolo: Cristina

Avatar per Coding Creativo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *