Chciałbym ostrzec każdą literę ciągu, ale nie jestem pewien, jak to zrobić.

Więc jeśli mam:

var str = 'This is my string';

Chciałbym móc osobno alarmować T, h, i, s itp. To dopiero początek pomysłu, nad którym pracuję, ale muszę wiedzieć, jak przetwarzać każdą literę osobno.

Chcę użyć jQuery i pomyślałem, że może potrzebuję użyć funkcji podziału po przetestowaniu długości łańcucha.

Pomysły?

Jeśli kolejność alertów ma znaczenie, użyj tego:

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

Jeśli kolejność alertów nie ma znaczenia, użyj tego:

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>

Prawdopodobnie jest to więcej niż rozwiązane. Chcę tylko pomóc w innym prostym rozwiązaniu:

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

Jedno możliwe rozwiązanie w czystym javascript:

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

Jak przetwarzać każdą literę tekstu (z testami porównawczymi)

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

dla

Klasyczny i zdecydowanie najbardziej wydajny . Powinieneś iść z tym, jeśli planujesz używać go w algorytmie krytycznym pod względem wydajności lub że wymaga on maksymalnej kompatybilności z wersjami przeglądarki.

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

dla ... z

for ... of to nowy ES6 dla iteratora. Obsługiwane przez większość nowoczesnych przeglądarek. Jest to bardziej atrakcyjne wizualnie i mniej podatne na błędy w pisaniu. Jeśli wybierasz ten w aplikacji produkcyjnej, prawdopodobnie powinieneś użyć transpilatora takiego jak Babel .

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

dla każdego

Podejście funkcjonalne . Zatwierdzony przez Airbnb . Największym minusem robienia tego w ten sposób jest to split(), że tworzy nową tablicę do przechowywania każdej pojedynczej litery łańcucha.

Dlaczego? To wymusza naszą niezmienną zasadę. Radzenie sobie z czystymi funkcjami zwracającymi wartości jest łatwiejsze do uzasadnienia niż skutki uboczne.

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

lub

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

Poniżej znajdują się te, których nie lubię.

dla w

W przeciwieństwie do ... z, zamiast litery dostajesz indeks listów. Działa dość źle.

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

mapa

Podejście funkcyjne, co jest dobre. Jednak mapa nie jest do tego przeznaczona. Należy go użyć, gdy trzeba zmienić wartości wewnątrz tablicy, co nie ma miejsca.

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

lub

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

Większość, jeśli nie wszystkie, odpowiedzi tutaj są błędne, ponieważ ulegną one zepsuciu, gdy w ciągu znaków znajdzie się znak spoza Unicode BMP (Basic Multilingual Plane) . Oznacza to, że wszystkie emoji zostaną zepsute .

JavaScript używa UTF- 16 Unicode dla wszystkich ciągów. W UTF-16 postacie poza BMP składają się z dwóch części, zwanych „ parą zastępczą ”, a większość odpowiedzi tutaj przetworzy każdą część takich par indywidualnie, a nie jako pojedynczy znak.

Jednym ze sposobów we współczesnym JavaScript od co najmniej 2016 roku jest użycie nowego iteratora ciągów . Oto przykład (prawie) prosto z 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"

Możesz tego spróbować

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

Jeszcze jedno rozwiązanie ...

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

Kiedy muszę napisać krótki kod lub linijkę, używam tego „hacka”:

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

To nie liczy nowych linii, więc może to być dobra lub zła rzecz. Jeśli które należą do nowej linii, należy wymienić: /./z /[\S\s]/. Drugi wkładki można zobaczyć prawdopodobnie używać .split()który ma wiele problemów

Nowy JS pozwala na:

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

Lepiej jest użyć instrukcji for ..., jeśli ciąg znaków zawiera znaki Unicode, ze względu na inny rozmiar bajtu.

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

krótka odpowiedź: Array.from(string) da ci to, czego prawdopodobnie chcesz, a następnie będziesz mógł iterować na nim lub cokolwiek innego, ponieważ jest to tylko tablica.

ok, spróbujmy z tym ciągiem: abc|⚫️\n⚪️|👨‍👩‍👧‍👧 .

punkty kodowe to:

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

więc niektóre znaki mają jeden punkt kodowy (bajt), a niektóre mają dwa lub więcej, a nowy wiersz został dodany do dodatkowych testów.

więc po przetestowaniu są dwa sposoby:

• byte per byte (codepoint per codepoint)
• grupy znaków (ale nie emoji całej rodziny)

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

Możesz teraz iterować poszczególne punkty kodu Unicode zawarte w ciągu znaków, używając String.prototype[@@iterator], który zwraca wartość dobrze znanego typu Symbol Symbol.iterator- domyślny iterator dla obiektów podobnych do tablicy ( Stringw tym przypadku).

Przykładowy kod:

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.

Działa to ze znakami Unicode, takimi jak emoji lub znaki inne niż rzymskie, które wyzwalałyby starsze konstrukcje.

Odniesienie: MDN Link do String.prototype @@ iterator .

Teraz można używać w kluczowych.

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

Możesz uzyskać tablicę takich postaci

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

a następnie zapętlić za pomocą zwykłego Javascript, w przeciwnym razie możesz iterować znaki ciągu za pomocą jQuery przez

var test = "test string";

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

możesz przekonwertować ten ciąg znaków na tablicę znaków przy użyciu split(), a następnie iterować go.

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

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

Jeśli chcesz wykonać transformację tekstu na poziomie znaków i odzyskać przekształcony tekst na końcu, możesz zrobić coś takiego:

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

Więc kroki:

• Podziel ciąg na tablicę (listę) znaków
• Mapuj każdą postać za pomocą funktora
• Połącz wynikową tablicę znaków w wynikowy ciąg

W dzisiejszym JavaScript możesz

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

Oczywiście c + c reprezentuje cokolwiek chcesz zrobić z c.

To zwraca

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

Powinno to działać w starszych przeglądarkach i ze znakami UTF-16, takimi jak 💩.

To powinno być najbardziej kompatybilne rozwiązanie. Jest jednak mniej wydajna niż forpętla.

Wygenerowałem wyrażenie regularne za pomocą 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)
});

Mam nadzieję że to pomoże!

Możesz uzyskać dostęp do pojedynczych znaków za pomocą str.charAt(index)lub str[index]. Ale ten drugi sposób nie jest częścią ECMAScript, więc lepiej przejdź do poprzedniego.

Jeśli chcesz animować każdą postać, może być konieczne zawinięcie jej w element span;

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

Myślę, że to najlepszy sposób, aby to zrobić, a następnie przetworzyć zakresy. (na przykład z TweenMax)

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

Wypróbuj ten kod

    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>