Gostaria de alertar cada letra individual de uma string, mas não tenho certeza de como fazer isso.

Então, se eu tiver:

var str = 'This is my string';

Eu gostaria de poder alertar separadamente T, h, i, s, etc. Este é apenas o começo de uma idéia em que estou trabalhando, mas preciso saber como processar cada letra separadamente.

Eu quero usar jQuery e estava pensando que talvez eu precise usar a função de divisão depois de testar qual é o comprimento da string.

Ideias?

Se a ordem dos alertas for importante, use o seguinte:

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

Se a ordem dos alertas não importar, use o seguinte:

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>

Provavelmente está mais do que resolvido. Só quero contribuir com outra solução simples:

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);
});

Uma solução possível em javascript puro:

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

Como processar cada letra do texto (com referências)

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

para

Clássico e de longe aquele com mais desempenho . Você deve optar por este caso esteja planejando usá-lo em um algoritmo de desempenho crítico ou se exija a máxima compatibilidade com as versões do navegador.

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

para de

for ... of é o novo ES6 para iterador. Suportado pela maioria dos navegadores modernos. É visualmente mais atraente e menos propenso a erros de digitação. Se você optar por este em um aplicativo de produção, provavelmente deverá usar um transpiler como o Babel .

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

para cada

Abordagem funcional . Airbnb aprovado . A maior desvantagem de fazer dessa maneira é a split(), que cria uma nova matriz para armazenar cada letra individual da string.

Por quê? Isso reforça nossa regra imutável. Lidar com funções puras que retornam valores é mais fácil de raciocinar do que efeitos colaterais.

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

ou

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

A seguir, os que não gosto.

para ... em

Ao contrário de ... of, você obtém o índice de letras em vez da letra. Ele executa muito mal.

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

mapa

Abordagem de função, o que é bom. No entanto, o mapa não deve ser usado para isso. Deve ser usado quando for necessário alterar os valores dentro de uma matriz, o que não é o caso.

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

ou

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

A maioria, se não todas, as respostas aqui estão erradas, pois elas serão interrompidas sempre que houver um caractere na cadeia de caracteres fora do BMP Unicode (Plano Multilíngue Básico) . Isso significa que todos os Emoji serão quebrados .

JavaScript usa UTF- 16 Unicode para todas as strings. No UTF-16, os caracteres além do BMP são compostos de duas partes, denominadas " Par Substituto " " e a maioria das respostas aqui processará cada parte desses pares individualmente, em vez de um único caractere.

Uma maneira no JavaScript moderno desde pelo menos 2016 é usar o novo iterador String . Aqui está o exemplo (quase) direto do 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"

Você pode tentar isso

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

Mais uma solução ...

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

Quando eu preciso escrever um código curto ou uma linha, eu uso este "hack":

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

Isso não contará novas linhas para que possa ser uma coisa boa ou ruim. Se você deseja incluir novas linhas, substitua: /./por /[\S\s]/. Os outros one-liners que você pode ver, provavelmente, usar .split()o que tem muitos problemas

O novo JS permite isso:

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

É melhor usar a instrução for ..., se a string contiver caracteres unicode, devido ao tamanho de byte diferente.

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

resposta curta: Array.from(string)fornecerá o que você provavelmente deseja e, em seguida, você pode iterá-lo ou o que quer que seja, já que é apenas uma matriz.

ok, vamos tentar com esta string: abc|⚫️\n⚪️|👨‍👩‍👧‍👧 .

Os pontos de código são:

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

portanto, alguns caracteres têm um ponto de código (byte) e outros dois ou mais, e uma nova linha adicionada para testes extras.

então, após o teste, há duas maneiras:

• byte por byte (ponto de código por ponto de código)
• grupos de caracteres (mas não o emoji de toda a família)

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
});

Agora você pode iterar sobre pontos de código Unicode individuais contidos em uma String usando String.prototype[@@iterator], que retorna um valor do tipo Symbol conhecido Symbol.iterator- o iterador padrão para Objetos semelhantes a matrizes (String neste caso).

Código de exemplo:

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.

Isso funciona com caracteres Unicode, como emoji ou caracteres não romanos, que desarmariam construções herdadas.

Referência: Link MDN para String.prototype @@ iterator .

Agora você pode usar em palavras-chave.

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

Você pode obter uma matriz de caracteres individuais como esse

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

e, em seguida, faça um loop usando Javascript comum, ou você pode iterar os caracteres da string usando jQuery por

var test = "test string";

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

você pode converter essa sequência em uma matriz de caracteres usando e split(), em seguida, iterar através dela.

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

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

Se você deseja fazer uma transformação no texto em um nível de personagem e recuperar o texto transformado no final, faça algo assim:

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

Então, as etapas:

• Divida a sequência em uma matriz (lista) de caracteres
• Mapear cada caractere por meio de um functor
• Associe a matriz de caracteres resultante à string resultante

No JavaScript de hoje, você pode

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

Obviamente, c + c representa o que você quer fazer com c.

Isso retorna

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

Isso deve funcionar em navegadores antigos e com caracteres UTF-16 como 💩.

Essa deve ser a solução mais compatível. No entanto, é menos eficiente que umfor loop seria.

Eu gerei a expressão 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 isto ajude!

Você pode acessar caracteres únicos com str.charAt(index)ou str[index]. Mas a última maneira não faz parte do ECMAScript, portanto é melhor você optar pela primeira.

Se você deseja animar cada caractere, pode ser necessário envolvê-lo no elemento span;

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

Eu acho que essa é a melhor maneira de fazer isso, depois processe os intervalos. (por exemplo, com TweenMax)

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

Experimente 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>