使用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

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

简单循环

好老的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循环

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