Question

I have an input field where a user could insert keywords, separated by commas. I’d like to generate an image with an src that is that keyword, with a default file extension of .png. The images are named based on anticipated keywords, so an image file isn’t being created here.

So, for example, a list:

[puppy, kitty, balloon, cookie]

Once a keyword that has an image is typed, a little icon for that thing pops up in another place in the hierarchy.

I’m already familiar enough with jquery to do a similar trick, but it’s the comma separated list part that i’m unsure how to tackle. I could take the value attribute of the input field, then set the image’s src to that value, as a variable. But how to capture only what’s between commas is the main question. (The space after a comma would be irrelevant)

Answer 1

You could do a split/trim/map:

var words = [];
jQuery.each(jQuery.trim(jQuery("#input").val()).split(","), function(index, value){ words.push(jQuery.trim(value));
});

That would give you an array of words nicely trimmed.