web-dev-qa-db-fra.com

Comment puis-je traiter chaque lettre de texte en utilisant Javascript?

Je voudrais alerter chaque lettre d'une chaîne, mais je ne sais pas comment faire.

Donc, si j'ai:

var str = 'This is my string';

J'aimerais pouvoir alerter séparément T, h, i, s, etc. Ceci n'est que le début d'une idée sur laquelle je travaille, mais je dois 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?

javascriptjquerystring
213
Nic Hubbard

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));
}
292
Eli Grey

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);
});
83
Mr. Goferito

Une solution possible en javascript pur:

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

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

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

for

Classic et de loin celui avec le plus de performances. Choisissez celui-ci si vous prévoyez de l’utiliser dans un algorithme de performances critiques ou si cela requiert une compatibilité maximale avec les versions de navigateur.

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

pour ... de

pour ... de est le nouveau ES6 pour l'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 celle-ci dans une application de production, vous devriez probablement utiliser un transpiler comme Babel .

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

pour chaque

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

Pourquoi? Cela applique notre règle immuable. Traiter avec des fonctions pures il est plus facile de raisonner sur les valeurs renvoyées 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 à ... 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 bon. Cependant, la carte n'est pas destinée à être utilisée pour cela. Il doit être utilisé pour modifier les valeurs 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;
});
48
zurfyx

Tu peux essayer ça

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

Quand j'ai besoin d'écrire un 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 nouvelles lignes, remplacez: /./ par /[\S\s]/. L’autre ligne que vous pouvez voir utilise probablement .split() qui pose de nombreux problèmes

9
Downgoat

Une autre solution ...

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

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 différente de l'octet.

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

Vous pouvez maintenant utiliser dans mot clé. 

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

6
mih0vil

Vous pouvez obtenir un tableau des caractères individuels comme

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

puis en boucle en utilisant Javascript régulier, ou 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);
});
5
Rich

Si vous souhaitez effectuer une transformation sur le texte au niveau du caractère et récupérer le texte transformé à la fin, procédez comme suit:

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

Alors les étapes:

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

Vous pouvez maintenant parcourir différents points de code Unicode contenus dans une chaîne en utilisant String.prototype[@@iterator], qui renvoie une valeur de type de symbole bien connu Symbol.iterator - l'itérateur par défaut pour les objets de type tableau (String dans 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 des caractères Unicode tels que des caractères emoji ou non romains qui risqueraient de faire trébucher les constructions héritées.

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

2
Aditya M P

réponse courte: Array.from(string) vous donnera ce que vous voulez probablement et vous pourrez ensuite l'itérer ou ce que vous voulez, puisque c'est juste un tableau.

ok essayons 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 codet (octet) et d'autres deux ou plus, et une nouvelle ligne est ajoutée pour des tests supplémentaires.

donc après avoir testé il y a deux façons:

  • octet par octet (point de code par point de code)
  • groupes de personnages (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
});
2
localhostdotdev

New JS permet ceci:

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

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>
0
meow

Cela devrait fonctionne dans les navigateurs plus anciens et avec les caractères UTF-16 comme ????.

Cela devrait être la solution la plus compatible. Cependant, elle est moins performante qu’une boucle for.

J'ai généré l'expression régulière à l'aide de 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!

0
Ben Gubler

Dans le JavaScript d'aujourd'hui, vous pouvez 

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

Évidemment, c + c représente tout ce que vous voulez faire avec c.

Cela retourne 

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

0
Pum Walters

Si vous souhaitez animer chaque personnage, vous devrez peut-être l'envelopper dans un é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);

0
Христо Панайотов