Я хотів би попередити кожну окрему букву рядка, але я не знаю, як це зробити.

Отже, якщо у мене є:

var str = 'This is my string';

Я хотів би мати можливість окремо попередити T, h, i, s тощо. Це лише початок ідеї, над якою я працюю, але мені потрібно знати, як опрацювати кожен лист окремо.

Я хочу використовувати jQuery і думав, що, можливо, мені потрібно буде використовувати функцію розділення після тестування, яка довжина рядка.

Ідеї?

Якщо порядок оповіщення має значення, скористайтеся цим:

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

Якщо порядок оповіщення не має значення, скористайтеся цим:

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>

Це, мабуть, більше, ніж вирішено. Просто хочу внести свій внесок у ще одне просте рішення:

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

Одне можливе рішення в чистому javascript:

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

Як обробити кожну букву тексту (з орієнтирами)

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

для

Класичний і, безумовно, той, що має найбільшу продуктивність . Вам слід скористатися цим, якщо ви плануєте використовувати його в алгоритмі критичної продуктивності, або якщо він вимагає максимальної сумісності з версіями браузера.

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

за ... оф

для ... of - це новий ES6 для ітератора. Підтримується більшістю сучасних браузерів. Він візуально привабливіший і менш схильний до помилок введення тексту. Якщо ви збираєтеся це в виробничій програмі, вам, мабуть, слід скористатися транспілятором, як Babel .

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

для кожного

Функціональний підхід. Airbnb затверджено . Найбільший недолік зробити це таким чином - це те split(), що створює новий масив для зберігання кожної окремої літери рядка.

Чому? Це виконує наше незмінне правило. Розібратися з чистими функціями, які повертають значення, простіше пояснити, ніж побічні ефекти.

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

або

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

Нижче перелічені ті, які мені не подобаються.

за ... в

На відміну від ... of, ви отримуєте буквений індекс замість букви. Виступає досить погано.

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

карта

Функціональний підхід, що добре. Однак карта не призначена для цього для використання. Його слід використовувати, коли потрібно змінювати значення всередині масиву, що не так.

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

або

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

Більшість, якщо не всі відповіді тут неправильні, тому що вони будуть ламатися, коли в рядку є символ, що знаходиться за межами BMP Unicode (Basic Multilingual Plane) . Це означає, що всі Емоджі будуть зламані .

JavaScript використовує UTF- 16 Unicode для всіх рядків. У UTF-16 символи поза BMP складаються з двох частин, які називаються " сурогатною парою ", і більшість відповідей тут оброблятиме кожну частину таких пар окремо, а не як один символ.

Один із способів у сучасному JavaScript, щонайменше, з 2016 року - використовувати новий ітератор String . Ось приклад (майже) прямо з 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"

Ви можете спробувати це

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

Ще одне рішення ...

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

Коли мені потрібно написати короткий код або однолінійку, я використовую цей "хак":

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

Це не буде рахувати нові рядки, так що це може бути хорошою справою чи поганою справою. Якщо ви включаєте нові рядки, замініть: /./на /[\S\s]/. Інший, який ви можете побачити, мабуть, використовує, .split()який має багато проблем

Новий JS дозволяє це:

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

Краще використовувати оператор for ... for, якщо рядок містить символи unicode через різний розмір байтів.

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

коротка відповідь: Array.from(string)дасть вам те, що ви, мабуть, хочете, і тоді ви зможете повторити його чи будь-що інше, оскільки це просто масив.

добре давайте спробуємо з цим рядком: abc|⚫️\n⚪️|👨‍👩‍👧‍👧.

Точки коду:

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

тому деякі символи мають одну кодову точку (байт), а деякі - дві або більше, а для додаткового тестування додається новий рядок.

тож після тестування є два способи:

• байт на байт (кодова точка на кодову точку)
• групи персонажів (але не всі сім'ї смайликів)

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

Тепер ви можете переглядати окремі точки коду Unicode, що містяться в String, використовуючи String.prototype[@@iterator], що повертає значення добре відомого типу Symbol Symbol.iterator- ітератора за замовчуванням для об’єктів, схожих на масив ( Stringу цьому випадку).

Приклад коду:

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.

Це працює з символами Unicode, такими як смайли або нероманські символи, які могли б збільшити застарілі конструкти

Довідка: посилання MDN на String.prototype @@ iterator .

Тепер ви можете використовувати в ключових словах.

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

Ви можете отримати масив окремих символів, як це

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

а потім циклічно використовуючи звичайний Javascript, інакше ви можете перебирати символи рядка за допомогою jQuery by

var test = "test string";

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

ви можете перетворити цей рядок у масив символів за допомогою split(), а потім повторити його.

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

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

Якщо ви хочете зробити перетворення тексту на рівні символів і повернути трансформований текст наприкінці, ви зробите щось подібне:

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

Отже, кроки:

• Розбийте рядок на масив (список) символів
• Мапа кожного символу за допомогою функтора
• Об’єднайте отриманий масив символів разом у отриманий рядок

У сьогоднішньому JavaScript ви можете

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

Очевидно, що c + c являє собою все, що ви хочете зробити з c.

Це повертається

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

Це має працювати в старих браузерах і з символами UTF-16, як 💩.

Це має бути найбільш сумісним рішенням. Однак він менш ефективний, ніж forпетля.

Я генерував регулярний вираз за допомогою 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)
});

Сподіваюся, це допомагає!

Ви можете отримати доступ до окремих символів за допомогою str.charAt(index)або str[index]. Але останній спосіб не є частиною ECMAScript, тому вам краще піти з попереднім.

Якщо ви хочете анімувати кожного персонажа, можливо, вам доведеться загорнути його в елемент span;

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

Я думаю, що це найкращий спосіб зробити це, а потім обробити проміжки. (наприклад, з TweenMax)

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

Спробуйте цей код

    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>