Перебрать строку с помощью jQuery / javascript

Question

Я загружаю простой текстовый файл с того же сервера, что и текущая веб-страница, используя jQuery - этот файл всегда будет содержать простое число без форматирования - например, 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 на разделенном массиве

ES5 совместимый.

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

forEach on string

ES5 совместимый. Будет работать немного быстрее, чем предыдущий метод для больших строк.

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

для цикла

Работает только в новых браузерах. Требуется поддержка 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] );