Vorrei avvisare ogni singola lettera di una stringa, ma non sono sicuro di come farlo.

Quindi, se ho:

var str = 'This is my string';

Vorrei poter avvisare separatamente T, h, i, s, ecc. Questo è solo l'inizio di un'idea su cui sto lavorando, ma devo sapere come elaborare ciascuna lettera separatamente.

Voglio usare jQuery e stavo pensando che potrei aver bisogno di usare la funzione split dopo aver testato la lunghezza della stringa.

Idee?

Se l'ordine degli avvisi è importante, utilizzare questo:

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

Se l'ordine degli avvisi non ha importanza, utilizzare questo:

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>

Probabilmente è più che risolto. Voglio solo contribuire con un'altra soluzione semplice:

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 possibile soluzione in javascript puro:

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

Come elaborare ogni lettera di testo (con parametri di riferimento)

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

per

Classico e di gran lunga quello con le massime prestazioni . Dovresti andare con questo se hai intenzione di usarlo in un algoritmo critico per le prestazioni o se richiede la massima compatibilità con le versioni del browser.

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

per ... di

per ... of è il nuovo ES6 per iteratore. Supportato dalla maggior parte dei browser moderni. È visivamente più accattivante ed è meno soggetto a errori di battitura. Se stai cercando questo in un'applicazione di produzione, dovresti probabilmente usare un transpiler come Babel .

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

per ciascuno

Approccio funzionale . Approvato Airbnb . Il più grande svantaggio di farlo in questo modo è il split(), che crea un nuovo array per memorizzare ogni singola lettera della stringa.

Perché? Questo rafforza la nostra regola immutabile. Trattare con funzioni pure che restituiscono valori è più facile da ragionare rispetto agli effetti collaterali.

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

o

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

Quelli che seguono sono quelli che non mi piacciono.

per ... in

A differenza di ... of, ottieni l'indice delle lettere anziché la lettera. Si comporta abbastanza male.

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

carta geografica

Approccio funzionale, che è buono. Tuttavia, la mappa non è pensata per essere utilizzata per questo. Dovrebbe essere usato quando è necessario modificare i valori all'interno di un array, che non è il caso.

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

o

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

La maggior parte se non tutte le risposte qui sono sbagliate perché si romperanno ogni volta che c'è un carattere nella stringa all'esterno del BMP Unicode (Basic Multilingual Plane) . Ciò significa che tutte le Emoji saranno rotte .

JavaScript utilizza Unicode UTF- 16 per tutte le stringhe. In UTF-16, i personaggi oltre il BMP sono composti da due parti, chiamate " Coppia surrogata " " e la maggior parte delle risposte qui elaborerà ciascuna parte di tali coppie singolarmente invece che come un singolo carattere.

Un modo nel JavaScript moderno almeno dal 2016 è utilizzare il nuovo iteratore di stringhe . Ecco l'esempio (quasi) direttamente da 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"

Puoi provare questo

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

Un'altra soluzione ...

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

Quando devo scrivere un codice breve o una riga, uso questo "hack":

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

Questo non conterà le nuove righe, quindi può essere una cosa positiva o negativa. Se si desidera includere newline, sostituire: /./con /[\S\s]/. Gli altri one-liner che potresti vedere probabilmente usano .split()che hanno molti problemi

Il nuovo JS consente questo:

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

È meglio usare l'istruzione for ... of, se la stringa contiene caratteri unicode, a causa della diversa dimensione dei byte.

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

risposta breve: Array.from(string)ti darà ciò che probabilmente desideri e quindi puoi iterare su di esso o qualsiasi altra cosa poiché è solo un array.

ok proviamo con questa stringa: abc|⚫️\n⚪️|👨‍👩‍👧‍👧.

i punti di codice sono:

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

quindi alcuni caratteri hanno un punto di codice (byte) e alcuni ne hanno due o più e una nuova riga aggiunta per ulteriori test.

quindi dopo il test ci sono due modi:

• byte per byte (punto di codice per punto di codice)
• gruppi di personaggi (ma non l'intera emoji della famiglia)

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

Ora puoi iterare su singoli punti di codice Unicode contenuti in una stringa usando String.prototype[@@iterator], che restituisce un valore di tipo Symbol ben noto Symbol.iterator- l'iteratore predefinito per oggetti simili a array ( Stringin questo caso).

Codice di esempio:

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.

Funziona con personaggi Unicode come emoji o caratteri non romani che potrebbero inciampare in costruzioni legacy.

Riferimento: MDN Link a String.prototype @@ iterator .

È ora possibile utilizzare in parola chiave.

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

È possibile ottenere una serie di singoli personaggi in questo modo

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

e poi esegui il ciclo usando il normale Javascript, oppure puoi scorrere i caratteri della stringa usando jQuery di

var test = "test string";

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

puoi convertire questa stringa in una matrice di caratteri usando split(), quindi scorrere attraverso di essa.

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

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

Se vuoi fare una trasformazione del testo a livello di carattere e riavere il testo trasformato alla fine, dovresti fare qualcosa del genere:

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

Quindi i passaggi:

• Dividi la stringa in un array (elenco) di caratteri
• Mappa ogni personaggio tramite un funzione
• Unisci l'array risultante di caratteri insieme nella stringa risultante

Nel JavaScript di oggi puoi

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

Ovviamente, c + c rappresenta qualunque cosa tu voglia fare con c.

Questo ritorna

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

Questo dovrebbe funzionare nei browser più vecchi e con caratteri UTF-16 come 💩.

Questa dovrebbe essere la soluzione più compatibile. Tuttavia, è meno performante di quanto forsarebbe un loop.

Ho generato l'espressione regolare 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)
});

Spero che sia di aiuto!

Puoi accedere a singoli caratteri con str.charAt(index)o str[index]. Ma quest'ultimo modo non fa parte di ECMAScript, quindi è meglio andare con il primo.

Se vuoi animare ogni personaggio potresti doverlo avvolgere nell'elemento span;

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

Penso che questo sia il modo migliore per farlo, quindi elaborare gli span. (ad esempio con TweenMax)

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

Prova questo codice

    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>