Как я могу обработать каждую букву текста, используя Javascript?

Я хотел бы предупредить каждую отдельную букву строки, но я не уверен, как это сделать.

Итак, если у меня есть:

var str = 'This is my string';

Я хотел бы иметь возможность отдельно оповещать T, h, i, s и т.д. Это только начало идеи, над которой я работаю, но мне нужно знать, как обрабатывать каждую букву отдельно.

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

Идеи?

Ответы

Ответ 1

Если порядок оповещений имеет значение, используйте это:

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

Если порядок оповещений не имеет значения, используйте это:

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

Ответ 2

Это, вероятно, более чем решено. Просто хочу внести свой вклад с другим простым решением:

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

Ответ 3

Одно из возможных решений в чистом javascript:

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

Ответ 4

Как обрабатывать каждую букву текста (с эталонами)

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

за

Классический и, безусловно, самый эффективный. Вы должны пойти с этим, если вы планируете использовать его в алгоритме, критичном к производительности, или если он требует максимальной совместимости с версиями браузера.

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

для... из

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

Вот те, которые мне не нравятся.

для... в

В отличие от... вы получаете буквенный индекс вместо буквы. Это работает довольно плохо.

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

Ответ 5

Большинство, если не все ответы здесь неправильны, потому что они ломаются всякий раз, когда в строке за пределами Unicode BMP (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"

Ответ 6

Вы можете попробовать это

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

Ответ 7

Когда мне нужно написать короткий код или однострочный, я использую этот "хак":

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

Это не будет считать символы новой строки, поэтому это может быть хорошо или плохо. Если вы включите новые строки, замените: /./ на /[\S\s]/. Другие однострочные изображения, которые вы можете увидеть, вероятно, используете .split(), у которого есть много проблем

Ответ 8

Еще одно решение...

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

Ответ 9

Лучше использовать инструкцию for..., если строка содержит символы Unicode, из-за разного размера байта.

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

Ответ 10

Теперь вы можете использовать ключевое слово.

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

Ответ 11

Новый JS позволяет это:

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

Ответ 12

Вы можете получить массив отдельных символов, например:

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

а затем цикл с использованием обычного Javascript, иначе вы можете перебирать символы строки с помощью jQuery

var test = "test string";

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

Ответ 13

Если вы хотите сделать преобразование текста на уровне символа и получить преобразованный текст в конце, вы бы сделали примерно следующее:

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

Итак, шаги:

  • Разделите строку в массив (список) символов
  • Сопоставьте каждый символ с помощью функтора
  • Присоедините полученный массив символов в результирующую строку

Ответ 14

краткий ответ: 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
});

Ответ 15

Если вы хотите оживить каждый символ, вам может потребоваться его обернуть в элемент 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);

Ответ 16

В сегодняшнем 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"]

Ответ 17

Это должно работать в старых браузерах и с символами 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)
});

Ответ 18

Теперь вы можете перебирать отдельные кодовые точки Unicode, содержащиеся в String.prototype[@@iterator] используя 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.

Ответ 20

Попробуйте этот код

    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>