Cómo separar una cadena en JavaScript

Escrito por cathlene s. baptista | Traducido por beatriz sánchez
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo separar una cadena en JavaScript
JavaScript tiene varias funciones incorporadas que puedes usar para manipular cadenas. (Dynamic Graphics Group/Dynamic Graphics Group/Getty Images)

JavaScript tiene varias funciones relacionadas con cadenas que puedes usar para manipular objetos basados en texto. Una de las razones más habituales para separar cadenas es cuando analizar valores de una lista. El lenguaje JavaScript proporciona una función incorporada, la función "split", que divide una cadenas en varios valores según un carácter determinado, o "delimitador". Una vez separada en partes, cada valor se coloca en un vector que se puede manipular con funciones de vector incorporadas de JavaScript.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Necesitarás

  • Un editor de texto
  • Un navegador con JavaScript habilitado

Lista completaMinimizar

Instrucciones

  1. 1

    Abre un editor de texto y crea un nuevo archivo llamado “splitString.html”. En la mayoría de los editores de texto, los nuevos archivos se crean seleccionando "Nuevo" en el menú "Archivo".

  2. 2

    Añade algunas etiquetas básicas HTML a “splitString.html” que incluyan una sección de cabecera y una sección de cuerpo. Juntas, estas etiquetas componen una página HTML muy básica.

  3. 3

    Inserta una etiqueta HTML "<textarea>" y otra "</textarea>" entre las etiquetas “<body>” y “</body>” de splitString.html. Asigna en la etiqueta “<textarea>” el valor "string" a "id" e inserta el texto “ABC12345EFG” entre las etiquetas “<textarea>” y “</textarea>”. Ten en cuenta que el texto "ABCD12345EFG" se utilizará sólo como un ejemplo. Este texto puede tener cualquier texto no reservado (válido) con un delimitador determinado.

    <textarea id="string">ABCD12345EFG</textarea>

  4. 4

    Inserta una etiqueta HTML “<input>” después de la etiqueta de cierre “</textarea>” y asigna a la etiqueta “<input>” el valor "submit" al atributo “type”. Asigna un evento “onclick()” a la etiqueta “<input>” que llama la función llamada “splitString()”.

    <input type="submit" onclick="splitString()";>

  5. 5

    Crea la función "splitString" colocando dos delimitadores JavaScript (“<script>” y “</script>”) entre las etiquetas “<head>” y “</head>” de splitString.html. Asigna a la etiqueta “<script>” el valor “text/javascript” en el atributo "type".

    <script type=”text/javascript”> </script>

  6. 6

    Declara la función “splitString” entre las etiquetas “<script>” de apertura y cierre de splitString.html. Coloca dos corchetes después de la declaración de la función como ubicación para el código de la función.

    function splitString() { }

  7. 7

    Inserta el método “getElementById” de JavaScript dentro de los corchetes de la función splitString. Utiliza el método “getElementById” para recuperar el valor de la zona de texto “string” (ABC12345EFG). Asigna el valor de texto a una variable llamada “stringToSplit”.

    stringToSplit = document.getElementById("string").value;

  8. 8

    Utiliza la función “split” de JavaScript para dividir la variable “stringToSplit” en el carácter “3”. Almacena el resultado de la función “split” en un vector llamado “splitString”. El vector “splitString” ahora contiene dos valores: “ABC12” y “45EFG”.

    splitString = stringToSplit.split("3");

  9. 9

    Utiliza dos funciones “alert” de JavaScript para crear dos cajas de alerta. La primera caja de alerta indicará al navegador el valor del primer vector (splitString[0]) y la segunda caja de alerta le indicará el valor del segundo vector (splitString[1]). Guarda y cierra splitString.html. Después del paso 9, splitString.html tendrá el siguiente aspecto:

    <html> <head> <script type="text/javascript"> function splitString() { stringToSplit = document.getElementById("string").value; splitString = stringToSplit.split("3"); alert(splitString[0]); alert(splitString[1]); } </script> </head> <body> <textarea id="string">ABCD12345EFG</textarea> <input type="submit" onclick="splitString()";> </body> </html>

  10. 10

    Abre splitString.html en un navegador que tenga habilitado JavaScript. Haz clic en el botón "Enviar" y verifica que la cadena separada aparece en dos partes en el navegador web.

Consejos y advertencias

  • Cuando separes cadenas con más de un único valor delimitador, puedes utilizar un bucle "for" de JavaScript para recuperar los valores.
  • Las cadenas de JavaScript son objetos que tienen varios métodos de objeto que puedes utilizar para manipular cadenas, incluyendo funciones que recuperan caracteres, cambian subcadenas o unen cadenas.
  • La función JavaScript “slice()” se puede utilizar para separar una cadena y devolver una nueva.
  • El delimitador utilizado con la función “split()” no está incluido en los resultados. Normalmente, se espera este resultado.
  • Las cajas de alerta "alert" de JavaScript pueden no funcionar como esperas si la configuración del navegador no las permite.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles