How to extract multiple parts from a html string with jQuery?

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 ?

hmmm, do you have control over the HTML? if so I would recommend putting each piece of info in it's own <td> instead of colspan="7" and we can parse it easily — Bobby Borszich
– Bobby Borszich, Commented Nov 13, 2010 at 1:47
I do, but removing colspan is going to ruin the presentation so not an option. — Kim
– Kim, Commented Nov 13, 2010 at 3:06
I can help parse whatever format you end up with, but is your data actually floating as loose text? can you surround the text stuff 2 in a span? — Bobby Borszich
– Bobby Borszich, Commented Nov 13, 2010 at 4:52
Placing "stuff 2" inside a span doesnt affect the look, so yes. The entire td content is separated into blocks with ' - ' as delimiter. If something equivalent to .split, but would retain the jQuery functionality then that would fix my problems. However in my research, all articles referrer to the native string functions of javascript, even when using jQuery, when dealing with string manipulation :( — Kim
– Kim, Commented Nov 13, 2010 at 5:38

Flo Edelmann · Accepted Answer · 2010-12-04 16:09:54Z

2

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

edited Dec 4, 2010 at 16:09

answered Nov 13, 2010 at 10:28

Flo Edelmann

2,6381 gold badge22 silver badges34 bronze badges

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

2 Comments

Kim Over a year ago

Thank you. Could you explain why you have the 2 functions ?

Flo Edelmann Over a year ago

the outerHTML function is very useful, but not included in jQuery. It returns the content of the tag plus the tag itself. And to search for a string in a regexp, you need to escape some chars (these ones: []\{}()+*?.$^|), so they are replaced with themselves after backslashes.

Collectives™ on Stack Overflow

How to extract multiple parts from a html string with jQuery?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related