使用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标签的响应吗？

由于

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" />' );
}

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(''))

鲍勃是你的叔叔。

Answer 3

您可以使用与单个字符匹配的正则表达式，并将每个字符替换为包含该字符的图像标记：

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

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

Answer 4

我将展示一些使用本机JavaScript功能迭代字符串str中字符的不同方法。

Plain for loop

好老的ES3方式。这将适用于与IE 6一样古老的浏览器。

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

forEach on split array

ES5兼容。

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

forEach on string

ES5兼容。对于大字符串，执行速度比前一个方法快一点。

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

for-of loop

仅在新浏览器中运行。需要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" />';
});

Answer 5

最简单的字符串循环：

var str = '9ABCD5';
for( var i in str )
    console.log( str[i] );