捕获<select>的内容

Question

我正在尝试使用正则表达式来捕获HTML select元素中所有选项值的内容

例如,在:

<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"}]

在这里查看上面的例子.