Захват содержимого <select>

Question

Я пытаюсь использовать регулярное выражение для захвата содержимого всех значений параметров внутри элемента выбора HTML

Например, в:

<select name="test">
<option value="blah">one</option>
<option value="mehh">two</option>
<option value="rawr">three</option>
</select>

Я бы хотел записать одно, два и три в массив.

Мой текущий код

var pages = responseDetails.responseText.match(/<select name="page" .+?>(?:\s*<option .+?>([^<]+)<\/option>)+\s*<\/select>/);

for (var c = 0; c<pages.length; c++) {
    alert(pages[c]);
}

Но он фиксирует только последнее значение, в данном случае «три».

Как я могу изменить это, чтобы захватить их всех?

Спасибо!

Answer 1

Даже если у вас есть только текст HTML, вы все равно можете использовать DOM для его анализа. Например, используя временный элемент для вставки HTML-кода и обхода параметров:

function extractOptions(html) {
  var el = document.createElement('div'), // temporary element
      result = [], select, option;

  el.innerHTML = html; // inject html
  select = el.getElementsByTagName('select')[0]; // get the first select element

  for (var i = 0, n = select.options.length; i < n; i++) { // loop options
    option = select.options[i];
    result.push({value: option.value, text: option.innerHTML});
  }
  return result;
}

// assuming that text contains the HTML string as in your example

var options = extractOptions(text);

// [{"value":"blah","text":"one"},
//  {"value":"mehh","text":"two"},
//  {"value":"rawr","text":"three"}]

Проверьте приведенный выше пример здесь .

Answer 2

Afaik нет кросс-браузерного способа сделать это только с помощью регулярных выражений. Тем не менее, вот какой-то дурацкий подход (потерпите меня на минуту объяснения).

Метод JavaScript String.replace может принимать функцию в качестве замены вместо строки формата. Функция оценивается для каждого соответствия полному регулярному выражению, поэтому вы можете (ab) использовать эту функцию для многократного выполнения чего-либо произвольного с каждым совпадением. Вот пример, который добавляет каждый выбор к массиву:

var matches = [];
var selectPattern = /<option .+?>([^<]+)<\/option>/;
body.replace(selectPattern, function(match) {
    matches.push(match);
});

Я думаю, что для этого предпочтительнее использовать скрытый DOM-узел ( см. Также ), но иногда "альтернативный" подход тоже интересен:)

Answer 3

это уже сделано для вас в HTML DOM

var myselectoptions = document.getElementByName("test").options;

for (var i = 0; i <= myselectoptions.length; i ++) {
  alert(myselectoptions[i].text);
  alert(myselectoptions[i].value);
}

В основном этот код будет захватывать текст и значение в массиве из HTML DOM и оповещать каждое значение для вас.

Вот ссылка для некоторой документации по отдельным элементам .options

Answer 4

Это все о подстроке в javascript. Для вашей строки регулярное выражение просто

/>(\w+)</

Теперь мы помещаем субматчи в массив,

var matches = [];
var str = '<option value="blah">one</option><option value="mehh">two</option><option value="rawr">three</option>';

var tmp;

do { 
    tmp = str;
    str = str.replace(/>(\w+)</,function($0,$1){
        matches.push($1);           
        return $0.replace($1,"");
    });

 } while(tmp!=str);

alert(matches);