Loop through a string with jQuery/javascript

Question

I am loading a simple txt file from the same server as the current web page using jQuery - this file will always include a plain number with no formatting - e.g. 123456

$(document).ready(function(){    

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

  function showAlert() {
    alert(test);
  }

});

At the moment, the code pulls the file in and then shows the content in an alert box but what I want to do is read through the response character by character and create an HTML string which I can then insert in to the page - each character would be converted to an image tag.

For example if the response was 123 I want to create a string holding the following HTML:

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

And then I will insert that string into a div on my page.

Can anybody suggest how to go about looping through the response to create the img tags?

Thanks

DisgruntledGoat · Accepted Answer · 2009-11-27 00:34:31Z

65

To loop through the characters in a string you would do this:

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

answered Nov 27, 2009 at 0:34

DisgruntledGoat

73k70 gold badges214 silver badges295 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DisgruntledGoat Over a year ago

@Eric jQuery was mentioned in the question, but I agree it shouldn't be used when there is a much simpler solution like this. jQuery.map can be elegant, but it doesn't seem like it in this particular case.

DanM7 Over a year ago

+1 because I was looking for a loop over a string, not jQuery.map - even though that's useful, just not what I needed.

Crescent Fresh · Accepted Answer · 2009-11-27 00:21:37Z

22

I love jQuery.map for stuff like this. Just map (ie convert) each number to a snippet of 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...

which you can then join('') and jam into the DOM in one swift punch:

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

And bob's your uncle.

edited Nov 27, 2009 at 0:21

answered Nov 26, 2009 at 20:45

Crescent Fresh

117k27 gold badges157 silver badges140 bronze badges

1 Comment

Crescent Fresh Over a year ago

@Eric: thanks for leaving a comment. So you know, when a question is tagged with 'jquery' it is acceptable for answers to utilize jQuery. The presumption is the OP wishes to learn more about the technologies they tag a question with.

Guffa · Accepted Answer · 2009-11-26 20:45:21Z

9

You can use a regular expression that matches a single character, and replace each character with an image tag that contains the character:

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

The pattern . matches a single character, the parentheses around it makes it a match to output, the g option stands for global so that it replaces all mathces, not just the first one. The $1 marker in the replacement string is where the match output (the character) will be placed.

answered Nov 26, 2009 at 20:45

Guffa

703k111 gold badges760 silver badges1k bronze badges

1 Comment

Guffa Over a year ago

What's the downvote for? It's rather pointless if you don't explain what it is that you don't agree with...

GOTO 0 · Accepted Answer · 2016-05-18 23:27:54Z

I'm going to show a few different ways to iterate over the characters in a string str using only native JavaScript functionality.

Plain for loop

The good old ES3 way. This will work in browsers as old as IE 6.

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

forEach on split array

ES5 compatible.

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

forEach on string

ES5 compatible. Will perform a little faster than the previous method for large strings.

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

for-of loop

Runs in new browsers only. Requires ES6 support.

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

As a note, in some common cases bulk operations over the characters in a string are better performed without an iteration using functional programming paradigms. For example, to retrieve an array from the characters in a string, str.split('') is enough, or with ES6 syntax [...str]. To map the characters in a string like array elements, it's much better to call Array.prototype.map directly on the string:

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

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

Simplest string for-in loop:

const str = 'ABC123'

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 14, 2015 at 19:08

vsync

133k61 gold badges345 silver badges430 bronze badges

Collectives™ on Stack Overflow

Loop through a string with jQuery/javascript

5 Answers 5

2 Comments

1 Comment

1 Comment

Plain for loop

forEach on split array

forEach on string

for-of loop

Comments

Simplest string for-in loop:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

1 Comment

Plain for loop

forEach on split array

forEach on string

for-of loop

Comments

Simplest string for-in loop:

Comments

Your Answer

Sign up or log in

Post as a guest

Related