Javascript:处理每个字母的文字

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

所以,如果我有:

var str = 'This is my string'; 

我希望能够单独提醒T,h,i,s等等。这只是我正在开发的一个想法的开始,但是我需要知道如何分别处理每个字母。

我想使用jQuery,并认为我可能需要在testingstring的长度后使用split函数。

想法?

我很惊讶没有人放下这个简单的解决scheme,不保留重新使用str.length。

如果警报顺序与您有关,请使用以下命令:

 for (var i = 0, len = str.length; i < len; i++) { alert(str[i]); } 

如果警报顺序对您无关紧要,请使用以下命令:

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

纯javascript的一个可能的解决scheme:

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

这可能比解决更多。 只是想用另一个简单的解决scheme:

 var text = 'uololooo'; for(var x = 0, c=''; c = text.charAt(x); x++){ console.log(c); } // Or without the for loop: text.split('').forEach(function(c) { console.log(c); }); // With ES6 [...text].forEach(c => console.log(c)) 

你可以试试这个

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

如何处理每个字母的文字(与基准)

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

对于

经典和迄今为止performance最好的一个。 如果您计划在性能关键algorithm中使用它,或者它需要与浏览器版本的最大兼容性,则应该使用该选项。

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

为…的

因为…是迭代器的新的ES6 。 受大多数现代浏览器支持。 它在视觉上更具吸引力,不太容易出现input错误。 如果你要在生产应用中使用这个工具,那么你应该使用像Babel这样的翻译工具 。

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

的forEach

function方法。 Airbnb批准 。 这样做的最大缺点是split() ,它创build一个新的数组来存储string的每个单独的字母。

为什么? 这强制执行我们不变的规则。 处理返回值的纯函数比副作用更容易推理。

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

要么

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

以下是我不喜欢的。

对于在…

与…不同,你得到的是字母索引而不是字母。 它performance相当糟糕。

 var result = ''; for (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; }); 

大部分(如果不是全部)答案都是错误的,因为只要在Unicode BMP(基本多语言平面)之外的string中存在字符,它们就会中断。 这意味着所有的表情符号都将被打破

JavaScript对所有string使用UTF- 16 Unicode。 在UTF-16中,BMP以外的字符由两部分组成,称为“ 代理 对 ”,这里的大多数答案将单独处理这些对的每个部分,而不是单个字符。

今天在2016年的现代JavaScript的一种方法是使用新的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" 

还有一个解决scheme

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

这不会算换行符,因此可以是好事或坏事。 如果您要包含换行符,请将/./replace为/[\S\s]/ 。 您可能会看到的其他单行程序可能使用了.split() ,它有许多问题

如果string包含unicode字符,由于字节大小不同,最好使用for …语句。

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

您现在可以使用关键字。

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

你可以得到像这样的单个字符的数组

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

然后循环使用正则的Javascript,否则你可以迭代使用jQuery的string的字符

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

如果你想对字符级别的文本进行转换,并在最后获得转换后的文本,则可以这样做:

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

所以步骤:

  • 将string拆分为字符数组(列表)
  • 通过仿函数映射每个字符
  • 将生成的字符数组一起join到结果string中

如果要为每个字符制作animation,则可能需要将其包含在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> 

您可以使用 str.charAt(index)str[index]来访问单个字符 。 但是后一种方法不是ECMAScript的一部分,所以你最好使用前者。