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

检查上面的示例here。

Answer 2

这已经在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中捕获数组中的文本和值，并为您提醒每个值。

Here is a link有关选择元素.options

的一些文档

Answer 3

Afaik没有跨浏览器的方式只用正则表达式来做这件事。然而，这是一种古怪的方法（请耐心等待一分钟的解释）。

JavaScript的String.replace方法可以接受函数作为替换，而不是格式字符串。该函数针对完整正则表达式的每个匹配进行评估，因此您可以（ab）使用此功能重复执行每个匹配项的任意操作。这是一个将每个选择添加到数组的示例：

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

我认为使用隐藏的DOM节点更适合这种情况（see also），但有时“替代”方法也很有趣：）

Answer 4

这完全是关于javascript中的子匹配。对于你的字符串，regexp很简单

/>(\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);

捕获<select> </select>的内容

4 个答案: