it-swarm.com.de

Wie kann ich jeden Buchstaben mit Javascript verarbeiten?

Ich möchte jeden einzelnen Buchstaben einer Zeichenfolge benachrichtigen, bin mir aber nicht sicher, wie ich das tun soll.

Wenn ich also

var str = 'This is my string';

Ich möchte in der Lage sein, T, h, i, s usw. separat zu warnen. Dies ist nur der Anfang einer Idee, an der ich arbeite, aber ich muss wissen, wie jeder Brief separat verarbeitet werden muss.

Ich möchte jQuery verwenden und dachte, ich müsste nach dem Testen der Länge der Zeichenfolge die Split-Funktion verwenden.

Ideen?

213
Nic Hubbard

Wenn die Reihenfolge der Benachrichtigungen wichtig ist, verwenden Sie diese:

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

Wenn die Reihenfolge der Benachrichtigungen keine Rolle spielt, verwenden Sie Folgendes:

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

Es ist wahrscheinlich mehr als gelöst. Ich möchte nur mit einer anderen einfachen Lösung beitragen:

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

Eine mögliche Lösung in reinem Javascript:

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

Wie werden die einzelnen Buchstaben bearbeitet (mit Benchmarks)?

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

for

Classic und bei weitem derjenige mit most performance. Sie sollten dies tun, wenn Sie beabsichtigen, es in einem leistungskritischen Algorithmus zu verwenden, oder wenn es die maximale Kompatibilität mit Browserversionen erfordert.

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

für ... von ...

für ... von ist der neue ES6 für Iterator. Wird von den meisten modernen Browsern unterstützt. Es ist optisch ansprechender und weniger anfällig für Tippfehler. Wenn Sie sich für eine Produktionsanwendung entscheiden, sollten Sie wahrscheinlich einen Transpiler wie Babel verwenden.

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

für jeden

Funktionaler Ansatz. Airbnb genehmigt . Der größte Nachteil dieser Methode ist split(), mit der ein neues Array erstellt wird, in dem jeder einzelne Buchstabe der Zeichenfolge gespeichert wird.

Warum? Dies erzwingt unsere unveränderliche Regel. Umgang mit reinen Funktionen Diese Rückgabewerte sind einfacher zu verstehen als Nebenwirkungen.

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

oder

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

Die folgenden sind mir nicht gefallen.

für in

Im Gegensatz zu ... von erhalten Sie anstelle des Buchstabens den Buchstabenindex. Es funktioniert ziemlich schlecht.

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

karte

Funktionsansatz, der gut ist. Die Karte ist jedoch nicht dafür gedacht. Es sollte verwendet werden, wenn die Werte in einem Array geändert werden müssen. Dies ist jedoch nicht der Fall.

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

oder

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

Die meisten, wenn nicht alle Antworten hier sind falsch, weil sie immer dann unterbrochen werden, wenn ein Zeichen in der Zeichenfolge enthalten ist außerhalb des Unicode BMP (Basic Multilingual Plane) . Das bedeutet alle Emoji werden gebrochen .

JavaScript verwendet für alle Zeichenfolgen TF -16 Unicode. In UTF-16 bestehen Zeichen jenseits von BMP) aus zwei Teilen, die als " SurrogatePair " bezeichnet werden, und den meisten Antworten Hier wird jeder Teil solcher Paare einzeln und nicht als einzelnes Zeichen verarbeitet.

Eine Möglichkeit in modernem JavaScript besteht seit mindestens 2016 darin, den neuen String-Iterator zu verwenden. Hier ist das Beispiel (fast) direkt aus 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"
36
hippietrail

Sie können es versuchen

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

Wenn ich einen Kurzcode oder einen Einzeiler schreiben muss, verwende ich diesen "Hack":

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

Das zählt keine Zeilenumbrüche, so dass dies eine gute oder eine schlechte Sache sein kann. Wenn Sie Zeilenumbrüche einfügen möchten, ersetzen Sie: /./ durch /[\S\s]/. Die anderen Einzeiler, die Sie möglicherweise sehen, verwenden wahrscheinlich .split(), wobei viele Probleme hat .

9
Downgoat

Eine weitere Lösung ...

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

Es ist besser, die Anweisung for ... of zu verwenden, wenn der String aufgrund der unterschiedlichen Bytegröße Unicode-Zeichen enthält.

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

Sie können jetzt das Schlüsselwort in verwenden. 

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

6
mih0vil

Sie können so ein Array der einzelnen Zeichen erhalten

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

und dann mit normalem Javascript in einer Schleife, oder Sie können die Zeichenfolge der Zeichenfolge mit jQuery durch iterieren

var test = "test string";

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

Wenn Sie den Text auf Zeichenebene umwandeln möchten und den umgewandelten Text am Ende wieder erhalten möchten, gehen Sie wie folgt vor:

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

Also die Schritte:

  • Teilen Sie die Zeichenfolge in ein Array (Liste) von Zeichen
  • Ordnen Sie jeden Charakter über einen Funktor zu
  • Fügen Sie das resultierende Array von Zeichen in der resultierenden Zeichenfolge zusammen
3
Vajk Hermecz

Sie können jetzt einzelne Unicode-Codepunkte in einer Zeichenfolge mit String.prototype[@@iterator] durchlaufen. Dabei wird der Wert des bekannten Symboltyps Symbol.iterator zurückgegeben - der Standarditerator für arrayähnliche Objekte (String in diesem Fall).

Beispielcode:

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.

Dies funktioniert mit Unicode-Zeichen wie Emoji oder nicht-lateinischen Zeichen, die ältere Konstrukte auslösen würden.

Referenz: MDN-Link zu String.prototype @@ iterator .

2
Aditya M P

kurze antwort: Array.from(string) gibt dir was du wahrscheinlich willst und dann kannst du es iterieren oder was auch immer, da es nur ein Array ist.

ok lass es uns mit diesem String versuchen: abc|⚫️\n⚪️|????‍????‍????‍????.

codepunkte sind:

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

einige Zeichen haben also einen Codepunkt (Byte), andere zwei oder mehr und eine neue Zeile, die für zusätzliche Tests hinzugefügt wird.

nach dem Testen gibt es also zwei Möglichkeiten:

  • byte für Byte (Codepunkt für Codepunkt)
  • zeichengruppen (aber nicht die ganze Familie Emoji)
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 erlaubt das:

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

Versuchen Sie diesen 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

Dies sollte in älteren Browsern funktionieren und mit UTF-16-Zeichen wie ????.

Dies sollte die am besten kompatible Lösung sein. Es ist jedoch weniger performant als eine for Schleife.

Ich habe den regulären Ausdruck mit regexpu generiert.

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

Hoffe das hilft!

0
Ben Gubler

Im heutigen JavaScript kannst du 

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

Offensichtlich steht c + c für alles, was Sie mit c tun möchten.

Das kehrt zurück 

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

0
Pum Walters

Wenn Sie jedes Zeichen animieren möchten, müssen Sie es möglicherweise in das span-Element einschließen.

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

Ich denke, dass dies der beste Weg ist, um dann die Spannweiten zu verarbeiten. (zum Beispiel mit TweenMax)

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