2010-11-13 2 views
0

Это более конкретный вопрос my other question.Как извлечь несколько частей из строки html с помощью jQuery?

Мне нужно извлечь части из этой строки таблицы ..

<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 Я в конечном итоге с массивом (или объекта), как это:

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" />' 
]; 

До сих пор у меня только удалось получить идентификатор. Я попытался расщепить значение td.html() с var tdspilt = $('td', tr).html().split(' - ');, но это дает две проблемы. 1) Потеря функций Jquery на tdsplit array, и 2) .html() заменяет & с &amp;

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

Как я могу закончить с желаемым результатом?

+0

Хммм, у вас есть контроль над HTML? если так, я бы рекомендовал поместить каждую часть информации в ее собственный вместо colspan = "7", и мы можем легко ее разобрать –

+0

Я делаю, но удаление colspan будет разрушать презентацию, поэтому не вариант. – Kim

+0

Я могу помочь разобрать любой формат, в котором вы закончили, но ваши данные фактически плавают как свободный текст? можете ли вы окружить текстовый материал 2 в промежутке? –

ответ

2

Вот jsFiddle: http://jsfiddle.net/elektronikLexikon/tH6Yq/

Ссылки тождественна с ожидаемой линией связью, даже если он красный, но я не знаю, почему.

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

Спасибо. Не могли бы вы объяснить, почему у вас есть две функции? – Kim

+0

Функция externalHTML очень полезна, но не включен в jQuery, он возвращает содержимое тега плюс сам тег. И для поиска строки в регулярном выражении вам нужно избежать некоторых символов (эти: '[] \ {}() + * ?. $^| '), поэтому они заменяются собой после обратной косой черты. – elektronikLexikon

Смежные вопросы