complete sample:
<html>
<script type="text/javascript">
// raw list image-names and tags
var images_raw =
"src1.jpg;tag1;tag2;tag3;tag4;tag5;unique1;\n\
src2.jpg;tag1;tag2;tag3;tag4;tag5;unique2;\n\
srcM.jpg;tag1;tag2;tag3;tag4;tag5;unique3;\n";
// intermediate list of each line of the images
var images_list = images_raw.split("\n");
// multi-dimensional array with the image-names and tags
images = new Array();
// let's fetch all tags in advance to make searching easier
tags = new Array();
tag_to_images = new Object();
for (var i = 0; i < images_list.length; i++) {
// creates the Array('srcI.jpg', 'tag1', 'tag2', ..., 'tagN', '')
images
[i] = images_list
[i].split(";");
// Add this image's index in the "images"-array to all associated tags for easy retrieval
// Ignore the first index (because it's the images name) and the last one (because it's empty)
for (var j = 1; j < images
[i].length - 1; j++) {
var tag = images
[i][j];
if (!tag_to_images[tag]) {
// Tag doesn't exist yet
tags.push(tag);
tag_to_images[tag] = new Array();
}
tag_to_images[tag].push(i);
}
}
// Output just for debugging, so I won't bother with correct handling of DOM
document.open();
for(tag = 0; tag < tags.length; tag++) {
tagname = tags[tag];
document.writeln('<ul>' + tagname);
for(image = 0; image < tag_to_images[tagname].length; image++) {
image_index = tag_to_images[tagname][image];
document.writeln('<li>' + images[image_index][0] + ' (' + image_index + ')</li>');
}
document.writeln('</ul>');
}
document.close();
</script>
</html>