Je voudrais alerter chaque lettre individuelle d'une chaîne, mais je ne sais pas comment procéder.

Donc, si j'ai:

var str = 'This is my string';

Je voudrais pouvoir alerter séparément T, h, i, s, etc. Ce n'est que le début d'une idée sur laquelle je travaille, mais j'ai besoin de savoir comment traiter chaque lettre séparément.

Je veux utiliser jQuery et pensais que je pourrais avoir besoin d'utiliser la fonction split après avoir testé la longueur de la chaîne.

Des idées?

Si l'ordre des alertes est important, utilisez ceci:

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

Si l'ordre des alertes n'a pas d'importance, utilisez ceci:

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>

C'est probablement plus que résolu. Je veux juste contribuer avec une autre solution 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);
});

Une solution possible en javascript pur:

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

Comment traiter chaque lettre de texte (avec des repères)

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

pour

Classique et de loin celui avec le plus de performances . Vous devriez aller avec celui-ci si vous prévoyez de l'utiliser dans un algorithme critique de performance, ou qu'il nécessite la compatibilité maximale avec les versions du navigateur.

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

pour ... de

for ... of est le nouveau ES6 pour itérateur. Pris en charge par la plupart des navigateurs modernes. Il est visuellement plus attrayant et moins sujet aux erreurs de frappe. Si vous optez pour celui-ci dans une application de production, vous devriez probablement utiliser un transpilateur comme Babel .

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

pour chaque

Approche fonctionnelle . Approuvé Airbnb . Le plus gros inconvénient de le faire de cette façon est le split(), qui crée un nouveau tableau pour stocker chaque lettre individuelle de la chaîne.

Pourquoi? Cela renforce notre règle immuable. Il est plus facile de raisonner sur les fonctions pures qui renvoient des valeurs que sur les effets secondaires.

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

ou

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

Ce qui suit sont ceux que je n'aime pas.

pour ... dans

Contrairement à pour ... de, vous obtenez l'index des lettres au lieu de la lettre. Il fonctionne assez mal.

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

carte

Approche fonctionnelle, ce qui est bien. Cependant, la carte n'est pas destinée à être utilisée pour cela. Il doit être utilisé lorsque vous devez modifier les valeurs à l'intérieur d'un tableau, ce qui n'est pas le cas.

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

ou

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

La plupart des réponses, sinon toutes, sont erronées car elles se brisent chaque fois qu'il y a un caractère dans la chaîne en dehors du BMP Unicode (plan multilingue de base) . Cela signifie que tous les Emoji seront brisés .

JavaScript utilise UTF- 16 Unicode pour toutes les chaînes. Dans UTF-16, les caractères au-delà du BMP sont constitués de deux parties, appelées « paire de substitution » et la plupart des réponses ici traiteront chaque partie de ces paires individuellement au lieu d'un seul caractère.

Une façon dans le JavaScript moderne depuis au moins 2016 est d'utiliser le nouvel itérateur String . Voici l'exemple (presque) tout droit sorti 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"

Vous pouvez essayer ceci

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

Encore une solution ...

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

Quand j'ai besoin d'écrire du code court ou un one-liner, j'utilise ce "hack":

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

Cela ne comptera pas les nouvelles lignes, ce qui peut être une bonne ou une mauvaise chose. Si vous souhaitez inclure des sauts de ligne, remplacez: /./par /[\S\s]/. Les autres monolignes que vous verrez probablement utiliser, .split()ce qui pose de nombreux problèmes

Le nouveau JS permet ceci:

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

Il est préférable d'utiliser l'instruction for ... of, si la chaîne contient des caractères unicode, en raison de la taille d'octet différente.

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

réponse courte: Array.from(string)vous donnera ce que vous voulez probablement et vous pourrez ensuite le répéter ou quoi que ce soit, car il ne s'agit que d'un tableau.

ok essayons-le avec cette chaîne: abc|⚫️\n⚪️|👨‍👩‍👧‍👧 .

les points de code sont:

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

certains caractères ont donc un point de code (octet) et certains en ont deux ou plus, et une nouvelle ligne a été ajoutée pour des tests supplémentaires.

donc après le test, il y a deux façons:

• octet par octet (point de code par point de code)
• groupes de caractères (mais pas les emoji de toute la famille)

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

Vous pouvez désormais parcourir les points de code Unicode individuels contenus dans une chaîne à l'aide de String.prototype[@@iterator], qui renvoie une valeur de type Symbol bien connu Symbol.iterator- l'itérateur par défaut pour les objets de type tableau ( Stringdans ce cas).

Exemple de code:

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.

Cela fonctionne avec les caractères Unicode tels que les emoji ou les caractères non romains qui déclencheraient les constructions héritées.

Référence: Lien MDN vers String.prototype @@ itérateur .

Vous pouvez maintenant utiliser dans mot-clé.

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

Vous pouvez obtenir un tableau des caractères individuels comme ça

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

puis boucle en utilisant Javascript ordinaire, ou bien vous pouvez parcourir les caractères de la chaîne en utilisant jQuery par

var test = "test string";

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

vous pouvez convertir cette chaîne en un tableau de caractères en utilisant split(), puis l'itérer.

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

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

Si vous souhaitez effectuer une transformation sur le texte au niveau d'un caractère et récupérer le texte transformé à la fin, vous feriez quelque chose comme ceci:

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

Donc, les étapes:

• Fractionner la chaîne en un tableau (liste) de caractères
• Mappez chaque personnage via un foncteur
• Joignez le tableau résultant de caractères ensemble dans la chaîne résultante

Dans le JavaScript d'aujourd'hui, vous pouvez

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

De toute évidence, c + c représente tout ce que vous voulez faire avec c.

Cela revient

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

Cela devrait fonctionner dans les anciens navigateurs et avec des caractères UTF-16 comme 💩.

Cela devrait être la solution la plus compatible. Cependant, elle est moins performante qu'une forboucle.

J'ai généré l'expression régulière en utilisant 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)
});

J'espère que cela t'aides!

Vous pouvez accéder à des caractères uniques avec str.charAt(index)ou str[index]. Mais cette dernière méthode ne fait pas partie d'ECMAScript, il vaut donc mieux choisir l'ancienne.

Si vous souhaitez animer chaque personnage, vous devrez peut-être l'envelopper dans l'élément span;

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

Je pense que c'est la meilleure façon de le faire, puis de traiter les portées. (par exemple avec TweenMax)

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

Essayez ce code

    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>