Cómo captar la primera letra de una cadena en JavaScript

  2. HowTo
  3. JavaScript Howtos
  4. Cómo captar la primera letra de una …
Kirill Ibrahim 12 octubre 2023
JavaScript JavaScript String
  1. Use los métodos toUpperCase() y slice() para capitalizar la primera letra en JavaScript
  2. Usa toUpperCase() con charAt() para captar la primera letra en JavaScript
  3. Use toUpperCase() y replace() para captar la primera letra en JavaScript
Cómo captar la primera letra de una cadena en JavaScript

Hay varias maneras de escribir en mayúsculas la primera letra de la cadena en JavaScript.

Por ejemplo:

  • "this is an example" -> "This is an example"
  • "the Atlantic Ocean" -> "The Atlantic Ocean"

Use los métodos toUpperCase() y slice() para capitalizar la primera letra en JavaScript

El método toUpperCase() transforma todas las letras de una cadena a mayúsculas; lo usaremos en combinación con otras funciones de JavaScript para alcanzar nuestro objetivo deseado.

El método slice(start,end) extrae una sección de una cadena y la devuelve como una nueva cadena.

start es el parámetro requerido. Es la posición en la que se empieza a cortar la cadena.

end es opcional. Es la posición en la que se termina la cadena de la rebanada. Si se omite, slice() termina al final de la cadena.

Ejemplo:

<!DOCTYPE html>   
<html>   
    <head>  
        <title></title> 
    </head>  
        
    <body style = "text-align:center;">     
          
        <input id = "input" type="text" name="input"/>  
        <button onclick="capitalizeString()">  
            Capitalize 
        </button>  
        <h3 id = "modified-string" > 
        </h3> 
            
        <script>  
         
        function capitalizeString() {
          let input = document.getElementById("input"); 
          let headingElement = document.getElementById("modified-string"); 
          let string = input.value; 
          headingElement.innerHTML = string[0].toUpperCase() +  
            string.slice(1); 
        } 
        </script>  
    </body>   
</html>

Resultado:

JavaScript capta la primera letra de una cadena

Otro ejemplo:

// shortened version
function capitalize(sentence) {
  return sentence && sentence[0].toUpperCase() + sentence.slice(1);
}

Usa toUpperCase() con charAt() para captar la primera letra en JavaScript

El método charAt() devuelve el carácter del índice especificado en una cadena. El índice comienza en 0.

Ejemplo:

// We will use the same html above
function capitalizeString() {
  let input = document.getElementById('input');
  let headingElement = document.getElementById('modified-string');
  let string = input.value;
  headingElement.innerHTML = string.charAt(0).toUpperCase() + string.slice(1);
  ;
}

Use toUpperCase() y replace() para captar la primera letra en JavaScript

El replace() es un método incorporado en JavaScript que busca en la cadena dada un valor especificado o un patrón de expresión regular, lo reemplaza y devuelve una nueva cadena.

La sintaxis de JavaScript replace():

string.replace(paramA, paramB)

Aquí, el paramA es un valor o una expresión regular, y paramB es un valor para reemplazar paramA con.

Nota: La cadena original permanecerá sin cambios, y el valor devuelto es una nueva cadena con los elementos reemplazados.

Ejemplo rápido sobre el método replace():

function replaceFunction() {
  let str = 'Google Event';
  let res = str.replace('Google', 'Microsoft');
  console.log(res)
}
replaceFunction();

function replaceAllFunction() {
  let str = 'Google Event will be in Headquarters of Google';
  let res = str.replace(/Google/g, 'Microsoft');
  console.log(res)
}
replaceFunction();

Nota: el método replace() sólo reemplaza la primera instancia por defecto. Deberíamos usar el modificador de la expresión regular global (g) para reemplazar todas las ocurrencias.

Ejemplo:

// We will use the same html above
function capitalizeString() {
  let input = document.getElementById('input');
  let headingElement = document.getElementById('modified-string');
  let string = input.value;
  headingElement.innerHTML = string.replace(/^./, string[0].toUpperCase());
}

/^./ representa la primera letra de la cadena. Lea más sobre las expresiones regulares en el Tutorial RegExp y en la Referencia de objetos RegExp.

Artículo relacionado - JavaScript String