关于jquery：如何使用Javascript处理每个文本字母？


How can I process each letter of text using Javascript?

我想提醒每一个字母的一个字符串，但我不确定如何做到这一点。

所以，如果我有：

1
var str = 'This is my string';

我希望能够单独提醒T、H、I、S等。这只是我正在研究的一个想法的开始，但我需要知道如何分别处理每个字母。

我想使用jquery，在测试了字符串的长度之后，我想可能需要使用split函数。

思想？

相关讨论

如果警报顺序很重要，请使用以下命令：

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

如果警报顺序无关紧要，请使用以下命令：

1
2
3
4
var i = str.length;
while (i--) {
  alert(str.charAt(i));
}
相关讨论

这可能不仅仅是解决问题。只想为另一个简单的解决方案做出贡献：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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中的一个可能解决方案：

1
2
3
4
5
for (var x = 0; x < str.length; x++)
{
    var c = str.charAt(x);
    alert(c);
}
相关讨论

如何处理每个文本字母(带基准)

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

对于

经典，迄今为止性能最好的一款。如果您计划在性能关键的算法中使用它，或者它需要与浏览器版本的最大兼容性，那么应该使用它。

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

为了……

for…of是迭代器的新ES6。受大多数现代浏览器支持。它在视觉上更吸引人，也不太容易出现打字错误。如果您打算在生产应用程序中使用这个，那么您可能应该使用类似babel的蒸腾器。

1
2
3
4
let result = '';
for (let letter of str) {
  result += letter;
}

前额

功能性方法。Airbnb已批准。这样做最大的缺点是split()，它创建了一个新的数组来存储字符串的每个字母。

Why? This enforces our immutable rule. Dealing with pure functions
that return values is easier to reason about than side effects.

1
2
3
4
5
// ES6 version.
let result = '';
str.split('').forEach(letter => {
  result += letter;
});

或

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

以下是我不喜欢的。

为了……

与…不同的是，你得到的是字母索引而不是字母。它的性能相当差。

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

地图

函数法，很好。然而，地图并不是用来做这个的。它应该在需要更改数组中的值时使用，而实际情况并非如此。

1
2
3
4
5
// ES6 version.
var result = '';
str.split('').map(letter => {
  result += letter;
});

或

1
2
3
4
let result = '';
str.split('').map(function(letter) {
  result += letter;
});
相关讨论

大多数(如果不是全部)答案都是错误的，因为在UnicodeBMP(基本多语言平面)之外的字符串中只要有一个字符，答案就会断开。这意味着所有的表情都会被打破。

javascript对所有字符串使用UTF-16 Unicode。在UTF-16中，BMP之外的字符由两部分组成，称为"代理项对"，这里的大多数答案将单独处理这些对的每个部分，而不是作为单个字符。

至少从2016年起，现代JavaScript中的一种方法是使用新的字符串迭代器。下面是(几乎)直接从MDN中得到的示例：

1
2
3
4
5
6
7
8
9
10
11
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"

相关讨论

你可以试试这个

1
2
3
4
5
var arrValues = 'This is my string'.split('');
// Loop over each value in the array.
$.each(arrValues, function (intIndex, objValue) {
    alert(objValue);
})
相关讨论

当我需要写短代码或一行程序时，我使用这个"hack"：

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

这不算换行，所以这可能是好事也可能是坏事。如果要包含换行符，请将：/./替换为/[\S\s]/。您可能看到的其他一行程序可能使用.split()，这有许多问题。

相关讨论

还有一个解决方案…

1
2
3
4
var strg= 'This is my string';
for(indx in strg){
  alert(strg[indx]);
}
相关讨论

如果字符串包含Unicode字符，则最好使用for…of语句，因为字节大小不同。

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

现在可以在关键字中使用。

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

相关讨论

您可以获得这样的单个字符数组

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

然后使用常规的javascript循环，或者使用jquery迭代字符串的字符

1
2
3
4
5
var test ="test string";

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

如果要在字符级别上对文本进行转换，并在末尾返回转换后的文本，可以执行以下操作：

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

所以步骤：

  • 将字符串拆分为字符数组(列表)
  • 通过函数映射每个字符
  • 将结果字符数组连接到结果字符串中

新的JS允许：

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

简短回答：Array.from(string)将提供您可能想要的东西，然后您可以迭代它或其他东西，因为它只是一个数组。

好的，让我们用这个字符串来试试：abc|??
??|???????????。

代码点是：

1
2
3
4
5
6
7
8
9
97
98
99
124
9899, 65039
10
9898, 65039
124
128104, 8205, 128105, 8205, 128103, 8205, 128103

因此，有些字符有一个码位(字节)，有些字符有两个或更多个码位，并添加了一个换行符用于额外的测试。

因此，测试后有两种方法：

  • 字节/字节(码位/码位)
  • 字符组(但不是整个家族的emoji)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
string ="abc|??
??|???????????"

console.log({ 'string': string }) // abc|??
??|???????????
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
});

在今天的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"]

如果你想动画每个角色，你可能需要把它包装在跨元素中；

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

我认为这是最好的方法，然后处理跨度。(例如使用Tweenmax)

tweenmax.staggerFromTo($demoext.find("span")，0.2，autoalpha:0，autoalpha:1，0.1)；

这应该在旧的浏览器中以及像这样的UTF-16字符中工作？？

这应该是最兼容的解决方案。但是，它的性能比for循环要差。

我使用regexpun生成了正则表达式

1
2
3
4
5
6
7
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)
});

希望这有帮助！

试试这个代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
    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;

}

<p>
Enter your text: <input type="text" id="htext"/>

    <button onclick="myFunction();">click on me</button>

</p>

您可以使用str.charAt(index)或str[index]访问单个字符。但是后一种方式不是ecmascript的一部分，所以您最好使用前一种方式。

相关讨论