使用jQuery/javascript循环遍历字符串

Question

我正在使用jQuery从与当前网页相同的服务器加载一个简单的txt文件 - 这个文件将始终包含一个没有格式的纯数字 - 比如 123456

$(document).ready(function(){    

  var test;
  $.getJSON('myfile.txt', function(data) {
    test = data;
    showAlert(); // this call will display actual value
  });

  function showAlert() {
    alert(test);
  }

});

目前代码会拉取文件并在提示框中显示内容，但我想做的是逐个字符地读取响应并创建一个HTML字符串，然后将其插入到页面中 - 每个字符都将被转换为图像标签。

例如，如果响应是123，我想创建一个包含以下HTML的字符串：

<img src="1.png" />
<img src="2.png" />
<img src="3.png" />

然后我将把该字符串插入到页面上的一个 div 中。

有人可以建议如何遍历响应以创建 img 标签吗？

谢谢。

- simonyoung

Answer 1

要循环遍历字符串中的字符，您需要执行以下操作：

var s = '123456';
for ( var i = 0; i < s.length; i++ )
{
  // `s.charAt(i)` gets the character
  // you may want to do a some jQuery thing here, like $('<img...>')
  document.write( '<img src="' + s.charAt(i) + '.png" />' );
}

- DisgruntledGoat

---

题目中提到了jQuery，但我同意如果有更简单的解决方案，就不应该使用它。jQuery.map可能很优雅，但在这种特定情况下似乎并不是最佳选择。 - DisgruntledGoat

+1 是因为我在寻找字符串循环的方法，而非 jQuery.map - 尽管后者也很有用，但并非我所需。 - DanM7

Answer 2

我喜欢使用jQuery.map来处理类似这样的东西。只需将每个数字映射(即转换)为一小段html片段：

var images = jQuery.map((1234567 + '').split(''), function(n) {
  return '<img src="' + n + '.png" />'
})

images[0]; // <img src="1.png" />
images[1]; // <img src="2.png" />
images[2]; // <img src="3.png" />
// etc...

然后，您可以使用join('')将它们连接在一起，并迅速将它们注入DOM中：

$('#sometarget').append(images.join(''))

然后你就搞定了。

- Crescent Fresh

---

@Eric：感谢您留下评论。您需要知道的是，当一个问题被标记为“jquery”时，使用jQuery回答是可以接受的。假设OP希望学习他们标记问题的技术。 - Crescent Fresh

Answer 3

你可以使用一个匹配单个字符的正则表达式，然后将每个字符替换为包含该字符的图像标签：

var html = data.replace(/(.)/g, '<img src="$1.png" />')

模式 . 匹配单个字符，圆括号使其成为匹配输出，g 选项表示全局匹配，因此它将替换所有匹配项，而不仅仅是第一个。替换字符串中的 $1 标记是匹配输出（即字符）将放置的位置。

- Guffa

---

为什么要负投票呢？如果你不解释你不同意的是什么，这样做就毫无意义了。。。 - Guffa

Answer 4

我将展示几种只使用原生JavaScript功能遍历字符串str中字符的不同方法。

普通for循环

这是老派的ES3方法。它可以在IE 6等旧版浏览器上运行。

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

在分割数组上使用forEach

兼容ES5。

str.split('').forEach(function (chr) {
    console.log(chr);
});

在字符串上使用forEach

兼容ES5。对于大型字符串，性能比先前的方法略高。

Array.prototype.forEach.call(str, function (chr) {
    console.log(chr);
});

for-of循环

仅在新版浏览器中运行。需要ES6支持。

for (var chr of str) {
    console.log(chr);
}

---

请注意，在某些常见情况下，使用函数式编程范例而不是迭代来执行字符串中字符的批量操作会更好。 例如，要从字符串中检索数组，str.split('')就足够了，或者使用ES6语法[...str]。 要将字符串中的字符映射为数组元素，最好直接在字符串上调用Array.prototype.map：

Array.prototype.map.call(str, function (chr) {
    return '<img src="' + chr + '.png" />';
});

- GOTO 0

Answer 5

最简单的字符串for-in循环：

const str = 'ABC123'

for (let i in str)
  console.log( str[i] )

- vsync