Me gustaría alertar a cada letra individual de una cadena, pero no estoy seguro de cómo hacerlo.

Entonces, si tengo:

var str = 'This is my string';

Me gustaría poder alertar por separado T, h, i, s, etc. Esto es solo el comienzo de una idea en la que estoy trabajando, pero necesito saber cómo procesar cada letra por separado.

Quiero usar jQuery y estaba pensando que podría necesitar usar la función de división después de probar cuál es la longitud de la cadena.

Ideas?

Si el orden de las alertas es importante, use esto:

for (var i = 0; i < str.length; i++) {
  alert(str.charAt(i));
}

Si el orden de las alertas no importa, use esto:

var i = str.length;
while (i--) {
  alert(str.charAt(i));
}

var str = 'This is my string';

function matters() {
  for (var i = 0; i < str.length; i++) {
    alert(str.charAt(i));
  }
}

function dontmatter() {
  var i = str.length;
  while (i--) {
    alert(str.charAt(i));
  }
}

<p>If the order of alerts matters, use <a href="#" onclick="matters()">this</a>.</p>

<p>If the order of alerts doesn't matter, use <a href="#" onclick="dontmatter()">this</a>.</p>

Probablemente esté más que resuelto. Solo quiero contribuir con otra solución simple:

var text = 'uololooo';

// With ES6
[...text].forEach(c => console.log(c))

// With the `of` operator
for (const c of text) {
    console.log(c)
}

// With ES5
for (var x = 0, c=''; c = text.charAt(x); x++) { 
    console.log(c); 
}

// ES5 without the for loop:
text.split('').forEach(function(c) {
    console.log(c);
});

Una posible solución en javascript puro:

for (var x = 0; x < str.length; x++)
{
    var c = str.charAt(x);
    alert(c);
}

Cómo procesar cada letra de texto (con puntos de referencia)

https://jsperf.com/str-for-in-of-foreach-map-2

para

Clásico y, con mucho, el que tiene el mayor rendimiento . Debería optar por este si planea utilizarlo en un algoritmo de rendimiento crítico, o si requiere la máxima compatibilidad con las versiones del navegador.

for (var i = 0; i < str.length; i++) {
  console.info(str[i]);
}

para ... de

for ... of es el nuevo ES6 para iterador. Compatible con la mayoría de los navegadores modernos. Es visualmente más atractivo y es menos propenso a errores de tipeo. Si va a utilizar este en una aplicación de producción, probablemente debería estar utilizando un transpilador como Babel .

let result = '';
for (let letter of str) {
  result += letter;
}

para cada

Enfoque funcional . Airbnb aprobado . El mayor inconveniente de hacerlo de esta manera es split()que crea una nueva matriz para almacenar cada letra individual de la cadena.

¿Por qué? Esto hace cumplir nuestra regla inmutable. Tratar con funciones puras que devuelven valores es más fácil de razonar que los efectos secundarios.

// ES6 version.
let result = '';
str.split('').forEach(letter => {
  result += letter;
});

o

var result = '';
str.split('').forEach(function(letter) {
  result += letter;
});

Los siguientes son los que no me gustan.

para ... en

A diferencia de ... de, obtienes el índice de la letra en lugar de la letra. Funciona bastante mal.

var result = '';
for (var letterIndex in str) {
  result += str[letterIndex];
}

mapa

Enfoque funcional, que es bueno. Sin embargo, el mapa no está destinado a ser utilizado para eso. Debe usarse cuando necesite cambiar los valores dentro de una matriz, que no es el caso.

// ES6 version.
var result = '';
str.split('').map(letter => {
  result += letter;
});

o

let result = '';
str.split('').map(function(letter) {
  result += letter;
});

La mayoría de las respuestas, si no todas, son incorrectas porque se romperán cuando haya un carácter en la cadena fuera del Unicode BMP (Plano multilingüe básico) . Eso significa que todos los Emoji estarán rotos .

JavaScript utiliza UTF- 16 Unicode para todas las cadenas. En UTF-16, los caracteres más allá del BMP están formados por dos partes, llamadas " Par sustituto " y la mayoría de las respuestas aquí procesarán cada parte de dichos pares individualmente en lugar de un solo carácter.

Una forma en JavaScript moderno desde al menos 2016 es usar el nuevo iterador de cadena . Aquí está el ejemplo (casi) directamente de MDN:

var string = 'A\uD835\uDC68B\uD835\uDC69C\uD835\uDC6A';

for (var v of string) {
  alert(v);
}
// "A"
// "\uD835\uDC68"
// "B"
// "\uD835\uDC69"
// "C"
// "\uD835\uDC6A"

Puedes probar esto

var arrValues = 'This is my string'.split('');
// Loop over each value in the array.
$.each(arrValues, function (intIndex, objValue) {
    alert(objValue);
})

Una solución más ...

var strg= 'This is my string';
for(indx in strg){
  alert(strg[indx]);
}

Cuando necesito escribir un código corto o una línea, utilizo este "hack":

'Hello World'.replace(/./g, function (char) {
    alert(char);
    return char; // this is optional 
});

Esto no contará nuevas líneas, por lo que puede ser algo bueno o malo. Si desea incluir nuevas líneas, reemplace: /./con /[\S\s]/. Las otras frases que puede ver probablemente usen, lo .split()que tiene muchos problemas

El nuevo JS permite esto:

const str = 'This is my string';
Array.from(str).forEach(alert);

Es mejor usar la instrucción for ... of, si la cadena contiene caracteres unicode, debido al diferente tamaño de byte.

for(var c of "tree 木") { console.log(c); }
//"𝐀A".length === 3

respuesta corta: Array.from(string)te dará lo que probablemente quieras y luego podrás repetirlo o lo que sea, ya que es solo una matriz.

ok vamos a intentarlo con esta cadena: abc|⚫️\n⚪️|👨‍👩‍👧‍👧.

los puntos de código son:

97
98
99
124
9899, 65039
10
9898, 65039
124
128104, 8205, 128105, 8205, 128103, 8205, 128103

entonces algunos caracteres tienen un punto de código (byte) y algunos tienen dos o más, y se agrega una nueva línea para pruebas adicionales.

así que después de probar hay dos formas:

• byte por byte (punto de código por punto de código)
• grupos de personajes (pero no los emoji de toda la familia)

string = "abc|⚫️\n⚪️|👨‍👩‍👧‍👧"

console.log({ 'string': string }) // abc|⚫️\n⚪️|👨‍👩‍👧‍👧
console.log({ 'string.length': string.length }) // 21

for (let i = 0; i < string.length; i += 1) {
  console.log({ 'string[i]': string[i] }) // byte per byte
  console.log({ 'string.charAt(i)': string.charAt(i) }) // byte per byte
}

for (let char of string) {
  console.log({ 'for char of string': char }) // character groups
}

for (let char in string) {
  console.log({ 'for char in string': char }) // index of byte per byte
}

string.replace(/./g, (char) => {
  console.log({ 'string.replace(/./g, ...)': char }) // byte per byte
});

string.replace(/[\S\s]/g, (char) => {
  console.log({ 'string.replace(/[\S\s]/g, ...)': char }) // byte per byte
});

[...string].forEach((char) => {
  console.log({ "[...string].forEach": char }) // character groups
})

string.split('').forEach((char) => {
  console.log({ "string.split('').forEach": char }) // byte per byte
})

Array.from(string).forEach((char) => {
  console.log({ "Array.from(string).forEach": char }) // character groups
})

Array.prototype.map.call(string, (char) => {
  console.log({ "Array.prototype.map.call(string, ...)": char }) // byte per byte
})

var regexp = /(?:[\0-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF])/g

string.replace(regexp, (char) => {
  console.log({ 'str.replace(regexp, ...)': char }) // character groups
});

Ahora puede iterar sobre puntos de código Unicode individuales contenidos en una Cadena mediante el uso String.prototype[@@iterator], que devuelve un valor de tipo de símbolo bien conocido Symbol.iterator: el iterador predeterminado para objetos tipo matriz ( Stringen este caso).

Código de ejemplo:

const str = 'The quick red 🦊 jumped over the lazy 🐶! 太棒了！';

let iterator = str[Symbol.iterator]();
let theChar = iterator.next();

while(!theChar.done) {
  console.log(theChar.value);
  theChar = iterator.next();
}

// logs every unicode character as expected into the console.

Esto funciona con caracteres Unicode, como emoji o caracteres no romanos que tropezarían con construcciones heredadas.

Referencia: MDN Link to String.prototype @@ iterator .

Ahora puede usar en palabras clave.

    var s = 'Alien';
    for (var c in s) alert(s[c]);

Puede obtener una variedad de los caracteres individuales de esta manera

var test = "test string",
    characters = test.split('');

y luego bucle usando Javascript regular, o puede iterar sobre los caracteres de la cadena usando jQuery por

var test = "test string";

$(test.split('')).each(function (index,character) {
    alert(character);
});

puede convertir esta cadena en una matriz de caracteres utilizando split(), luego iterar a través de ella.

const str = "javascript";
const strArray = str.split('');

strArray.map(s => console.log(s));

Si desea realizar una transformación en el texto a nivel de caracteres y recuperar el texto transformado al final, debería hacer algo como esto:

var value = "alma";
var new_value = value.split("").map(function(x) { return x+"E" }).join("")

Entonces los pasos:

• Divida la cadena en una matriz (lista) de caracteres
• Mapa de cada personaje a través de un functor
• Unir el conjunto resultante de caracteres en la cadena resultante

En el JavaScript de hoy puedes

Array.prototype.map.call('This is my string', (c) => c+c)

Obviamente, c + c representa lo que quieras hacer con c.

Esto vuelve

["TT", "hh", "ii", "ss", " ", "ii", "ss", " ", "mm", "yy", " ", "ss", "tt", "rr", "ii", "nn", "gg"]

Esto debería funcionar en navegadores antiguos y con caracteres UTF-16 como 💩.

Esta debería ser la solución más compatible. Sin embargo, es menos eficaz de lo que forsería un bucle.

Genere la expresión regular usando regexpu

var str = 'My String 💩 ';
var regEx = /(?:[\0-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF])/g


str.replace(regEx, function (char) {
    console.log(char)
});

¡Espero que esto ayude!

Puede acceder a caracteres individuales con str.charAt(index)o str[index]. Pero la última forma no es parte de ECMAScript, por lo que es mejor que elija la primera.

Si desea animar cada personaje, es posible que necesite envolverlo en el elemento span;

var $demoText = $("#demo-text");
$demoText.html( $demoText.html().replace(/./g, "<span>$&amp;</span>").replace(/\s/g, " "));

Creo que esta es la mejor manera de hacerlo, luego procesar los tramos. (por ejemplo con TweenMax)

TweenMax.staggerFromTo ($ demoText.find ("span"), 0.2, {autoAlpha: 0}, {autoAlpha: 1}, 0.1);

Prueba este código

    function myFunction() {
    var text =(document.getElementById("htext").value); 
    var meow = " <p> <,> </p>";
    var i;


    for (i = 0; i < 9000; i++) {

        text+=text[i] ;



    }

    document.getElementById("demo2").innerHTML = text;

}
</script>
<p>Enter your text: <input type="text" id="htext"/>

    <button onclick="myFunction();">click on me</button>
</p>