Question

I am currently pulling an XML feed into a webapp through ajax. Obviously i like using jquery to parse it, like so:

$(source).find("item"); 

The problem with this is that everything is converted into nodes, including -tags. Considering this is some sort of RSS feed, and the feed contains complete articles (including image galleries), there are many img-tags. To prevent this, i would like to try and convert the img-tags to something like this:

before:

<img src="path_to_img.jpg" width="450" height="199" alt="alt description" title="image title" class="image_classes" />

after:

<image>
<src>path_to_img.jpg</src>
<alt>alt description</alt>
<title>image title</title>
<class>image_classes</class>
</image>

If anyone has better suggestions than using regexes, those are of course welcome too. But because it all has to be treated like text, I fear there are few, considering images start preloading when they are added to the DOM.

Answer 1

Well, it’s not going to be very easy unless you can guarantee all those attributes will always be present, and always in quoted strings etc etc.

var html = '<img src="path_to_img.jpg" width="450" height="199" alt="alt description" title="image title" class="image_classes" />';
var regex = /<img .*?(src|alt|title|class)="([^"]*)" .*?(src|alt|title|class)="([^"]*)" .*?(src|alt|title|class)="([^"]*)" .*?(src|alt|title|class)="([^"]*)".*?\/?>/g;
var xmlTemplate = '<image><$1>$2</$1><$3>$4</$3><$5>$6</$5><$7>$8</$7></image>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​';
var xml = html.replace(regex, xmlTemplate);

If your source HTML is not as uniform, then you might have to use .replace(regex, func) instead of .replace(regex, string).

As you have said the alt attribute may not be present, then you will need to use regex with a function, like this:

var html = '<img src="path_to_img.jpg" width="450" height="199" alt="alt description" title="image title" class="image_classes" />';
var regex = /<img .*?>/gi;
function getAttributeValue(tag, attribute)
{
    var regex = new RegExp('\\b' + attribute + '="([^"]*)"', 'i');
    var match = tag.match(regex);
    return '\t<' + attribute + '>' + (match ? match[1] : '') + '</' + attribute + '>\n';
}

var xml = html.replace(regex, function($0)
{
    var xml = '<image>\n';
    xml += getAttributeValue($0, 'src');
    xml += getAttributeValue($0, 'alt');
    xml += getAttributeValue($0, 'title');
    xml += getAttributeValue($0, 'class');
    xml += '</image>';
    return xml;
});