Получение части текста внутри div с регулярным выражением

Question

У меня есть этот код HTML, и я пытаюсь получить значения SizeX, SizeY и Color.

<div id="index"> 
    <h2>Things</h2> 
    <p><span>SizeX: </span><strong>15</strong></p> 
    <p><span>SizeY: </span><strong>25</strong></p> 
    <p><span>Color: </span><strong>red</strong></p> 
</div> 

http://s.codepen.io/boomerang/f82d98de7f4d3d8475f359c0fefbed2c1439723962777/index.html

Это то, что я сделал до сих пор (делать все это в консоли разработчика). Сначала я сохранил #index внутри переменной, с этой командой var parameters = $("#index");.

Теперь после того, как я получил все, хранящегося в переменной, я стараюсь, чтобы получить первое значение (SizeX) с помощью следующей команды:

var SizeX = /<span>sizex: <\/span><strong>(\w+)/i.exec(parameters); 

Тогда я называю SizeX, чтобы увидеть результат и результат null. Я не знаю, почему, мое регулярное выражение должно быть правильным, учитывая, что он работает там https://regex101.com/r/hV1mB5/1.

И я использую exec так же, как показано здесь http://www.w3schools.com/js/js_regexp.asp.

Спасибо. :)

Answer 1

У вас будет головная боль, если вы используете регулярное выражение с HTML. Это просто плохо, руки вниз.

Лучшим способом было бы использовать метод jQuery $.fn.text.

var elem = $('#index'); 
var obj = {}; 
elem.find('span').each(function(){ 
    obj[$(this).text().replace(/\W/g, "")] = $(this).next().text().trim(); 
}); 

Вы знаете, вы только с помощью брекет-нотации и делает текст Пролет без без буквенных символов (которые удалены), имя свойства, и мы присваиваем обрезанный текст следующего элемента, который <strong>

Answer 2

Вам не нужно регулярное выражение на все:

$("#index strong").each(function(index) { 
    console.log( $(this).text()); 
}); 

http://jsfiddle.net/vr7rxb3p/

Update:

console.log( $(this).prev().text()+':'+$(this).text()); 

теперь делают ВАР, поместить их в массив/объект, или все, что вы хотите ...