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

Also, wenn ich habe:

var str = 'This is my string';

Ich möchte T, h, i, s usw. separat benachrichtigen können. Dies ist nur der Anfang einer Idee, an der ich arbeite, aber ich muss wissen, wie jeder Buchstabe separat verarbeitet wird.

Ich möchte jQuery verwenden und dachte, ich müsste möglicherweise die Split-Funktion verwenden, nachdem ich die Länge der Zeichenfolge getestet habe.

Ideen?

Wenn die Reihenfolge der Warnungen von Bedeutung ist, verwenden Sie Folgendes:

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

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

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>

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

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

Eine mögliche Lösung in reinem Javascript:

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

So verarbeiten Sie jeden Textbuchstaben (mit Benchmarks)

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

zum

Klassisch und bei weitem derjenige mit der höchsten Leistung . Sie sollten sich für diesen entscheiden, wenn Sie ihn in einem leistungskritischen Algorithmus verwenden möchten oder wenn er die maximale Kompatibilität mit Browserversionen erfordert.

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

für ... von

for ... of ist der neue ES6 für Iterator. Unterstützt von den meisten modernen Browsern. Es ist optisch ansprechender und weniger anfällig für Tippfehler. Wenn Sie diesen in einer Produktionsanwendung verwenden, sollten Sie wahrscheinlich einen Transpiler wie Babel verwenden .

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

für jedes

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

Warum? Dies setzt unsere unveränderliche Regel durch. Der Umgang mit reinen Funktionen, die Werte zurückgeben, ist leichter zu begründen als Nebenwirkungen.

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

oder

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

Das Folgende sind diejenigen, die ich nicht mag.

für in

Im Gegensatz zu für ... von erhalten Sie den Buchstabenindex anstelle des Buchstabens. 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 innerhalb eines Arrays geändert werden müssen, was nicht der Fall ist.

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

oder

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

Die meisten, wenn nicht alle Antworten hier sind falsch, da sie unterbrochen werden, wenn sich ein Zeichen in der Zeichenfolge außerhalb des Unicode-BMP (Basic Multilingual Plane) befindet . Das bedeutet, dass alle Emoji kaputt sind .

JavaScript verwendet UTF- 16- Unicode für alle Zeichenfolgen. In UTF-16, Zeichen jenseits der BMP sind aus aus zwei Teilen, einem „genannt Surrogate Pair “ und die meisten Antworten hier wird verarbeiten jedes Teil solcher Paare einzeln statt als ein einzelnes Zeichen.

Eine Möglichkeit in modernem JavaScript seit mindestens 2016 ist die Verwendung des neuen String-Iterators . 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"

Sie können dies versuchen

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

Noch eine Lösung ...

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

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

Dies 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 Sie sehen wahrscheinlich möglicherweise verwenden , .split()die viele Probleme hat

New JS erlaubt dies:

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

Aufgrund der unterschiedlichen Bytegröße ist es besser, die Anweisung for ... of zu verwenden, wenn die Zeichenfolge Unicode-Zeichen enthält.

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

kurze Antwort: Array.from(string)gibt Ihnen, was Sie wahrscheinlich wollen, und dann können Sie darauf iterieren oder was auch immer, da es nur ein Array ist.

ok lass es uns mit dieser Zeichenfolge 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) und einige zwei oder mehr, und eine neue Zeile wurde für zusätzliche Tests hinzugefügt.

Nach dem Testen gibt es also zwei Möglichkeiten:

• Byte pro Byte (Codepunkt pro Codepunkt)
• Charaktergruppen (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
});

Sie können jetzt einzelne Unicode-Codepunkte durchlaufen, die in einem String enthalten sind, indem Sie String.prototype[@@iterator]einen Wert des bekannten Symboltyps zurückgeben Symbol.iterator- den Standarditerator für Array-ähnliche Objekte ( Stringin 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-römischen Zeichen, die ältere Konstrukte auslösen würden.

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

Sie können jetzt in Schlüsselwort verwenden.

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

Sie können ein Array der einzelnen Zeichen wie folgt erhalten

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

und dann eine Schleife mit normalem Javascript ausführen, oder Sie können die Zeichen der Zeichenfolge mit jQuery von durchlaufen

var test = "test string";

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

Sie können diese Zeichenfolge mithilfe von in ein Array von Zeichen konvertieren split()und dann durchlaufen.

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

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

Wenn Sie den Text auf Zeichenebene transformieren und den transformierten Text am Ende zurückerhalten möchten, gehen Sie folgendermaßen 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 (eine Liste) von Zeichen auf
• Ordne jeden Charakter über einen Funktor zu
• Verbinden Sie das resultierende Zeichenarray zu der resultierenden Zeichenfolge

Im heutigen JavaScript können Sie

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

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

Dies kehrt zurück

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

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

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

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!

Sie können mit oder auf einzelne Zeichen zugreifen . Der letztere Weg ist jedoch nicht Teil von ECMAScript, daher sollten Sie sich besser für den ersteren entscheiden.str.charAt(index)str[index]

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

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

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

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

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>