Question

This is a more specific question of my other question.

I need to extract parts from this table row..

<tr><td colspan="7"><a href="http://link/index.php?view=page&id=2961" target="_blank" title="title">atext1 atext2</a> - stuff 2 - <img src="img/icon_1.gif" class="icon" title="icon1" />12 - <img src="img/icon_2.gif" class="icon" title="icon2" />4 - <span title="long title"><img src="img/icon_3.gif" class="icon" /> stuff 5 </span></td></tr>

..so I end up with an array (or object) like this:

var data = [
 'id' = 2961,
 'text' = 'stuff 2',
 'link' = '<a href="http://link/index.php?view=page&id=2961" target="_blank" title="title">atext1</a>',
 'icon1' = '<img src="img/icon_1.gif" class="icon" title="icon1" />12',
 'icon2' = '<img src="img/icon_2.gif" class="icon" title="icon2" />4',
 'icon3' = '<img src="img/icon_3.gif" class="icon" title="stuff 5: long title" />'
];

So far have I only been able to get the id. I tried splitting the td.html() value with var tdspilt = $('td', tr).html().split(' - ');, but that gives 2 problems. 1) Loss of jquery functions on tdsplit array, and 2) .html() replaces & with &

var tr = 'above tr row';
var data = [];
data['id'] = $('td', tr).eq(0).find('a').attr('href').match(/view=page&id=([0-9]+)/)[1];

How can I end up with desired result ?

Answer 1

Here is a jsFiddle: http://jsfiddle.net/elektronikLexikon/tH6Yq/

The link is identically with the expected link, even if it’s red, but I don’t know why.

jQuery.fn.outerHTML = function(s) {
    return (s) ? this.before(s).remove() : jQuery("<p>").append(this.eq(0).clone()).html();
}
function escapeRegExpStr(str){
  return str.replace(/[\[\]\\{}()+*?.$^|]/g, function(m){return '\\'+m;});
}

data['id'] = $('td', tr).eq(0).find('a').attr('href').match(/view=page&id=([0-9]+)/)[1];

data['link'] = $('a', tr).eq(0).outerHTML();
data['text'] = $('td', tr).eq(0).html().match(new RegExp(escapeRegExpStr(data['link'])+" - (.*?) - ", ''))[1];

data['link'] = data['link'].replace(escapeRegExpStr($('a', tr).eq(0).html()), $('a', tr).eq(0).html().match(/(.*?) /)[1]);

data['icon1'] = $('img', tr).eq(0).outerHTML();
data['icon1'] += $('td', tr).eq(0).html().match(new RegExp(escapeRegExpStr(data['icon1'])+"(.*?) - ", ''))[1];

data['icon2'] = $('img', tr).eq(1).outerHTML();
data['icon2'] += $('td', tr).eq(0).html().match(new RegExp(escapeRegExpStr(data['icon2'])+"(.*?) - ", ''))[1];

data['icon3'] = $('img', tr).eq(2).outerHTML();
icon3title = $.trim($('td', tr).eq(0).html().match(new RegExp(escapeRegExpStr(data['icon3'])+"(.*?)\s*<\/span>", ''))[1]) + ": " + $('span:last', tr).attr("title");
data['icon3'] = data['icon3'].replace(/>/, ' title="' + icon3title + '">');