匹配元素 ID 或元素名称/值的正则表达式搜索

Question

我想创建一个脚本 (JavaScript) 来枚举所有“无线电”元素，搜索那些具有匹配某些正则表达式的“ID”（或者可能是“名称”和“值”）的元素。如果匹配，我将根据匹配的正则表达式执行附加代码。按“ID”搜索应该比按“名称”和“值”搜索更容易，但在某些情况下，元素没有“ID”，所以在这些情况下，我会按“名称”搜索正则表达式匹配”和“价值”。

以下是一些典型的“无线电”元素集：

<span>
<input id="ABC123" onclick="somefunction('DEF');" name="GHI" value="JKL45" type="radio">
<input id="MNO678" onclick="somefunction('PQR');" name="GHI" value="STU90" type="radio">
</span>

<span>
<input name="GHI" value="JKL45" type="radio">
<input name="GHI" value="STU90" type="radio">
</span>

我在下面编写了大部分 JavaScript。此脚本将保存为网络浏览器快捷方式（书签/收藏夹）的“URL”。这通常被称为“Bookmarklet”（或 IE 的“Favlet”）。

这是我目前所拥有的：

javascript: 
(function(){ 
  function dorado(rado){ 
    /* 
    Here I want to test if the value of the "ID" for 
    the element "rado" matches any 1 of 2-or-3 different 
    regex's. If there is no "ID" then I'd test "Name" and "Value" 

    If none of the regex's match, I'll return. 
    Otherwise, I'll execute additional code depending on which regex matched. 
    */ 
  } 
  var x,k,f,j; 
  x=document.forms; 
  for (k=0; k<x.length; ++k) { 
    f=x[k]; 
    for (j=0;j<f.length;++j) 
// call dorado() only for "radio" elements. 
      if (f[j].type.toLowerCase() == "radio") 
        dorado(f[j]); 
  } 
} 
)(); 

---

已编辑： 2013 年 9 月 11 日下午 5:48 (CT)，提供了更多详细信息。

稍微澄清一下...“radio-id”属性应该唯一标识“radio”类型页面上的每个"<input"元素。在某些情况下，"<input" 元素可能没有设置其“ID”属性。在这些情况下，我必须同时检查“radio-name”和“radio-value”，因为“radio-name”在单选按钮组合在一起以选择“众多中的一个”的情况下，不会唯一标识每个单选元素"（“radio-name”通常对于所有分组的无线电元素都是相同的），并且“radio-value”对于页面上的许多无线电元素可能是相同的。

所以，当我检查每个“radio”元素时（在一个循环中），我首先需要确定是否设置了“radio-id”属性。

如果设置了“radio-id”属性，我需要测试“ID”是否匹配 2 或 3 个不同正则表达式中的任何 1 个。如果没有任何匹配，我会“返回”。否则，我将根据匹配的正则表达式执行其他代码。

同样，如果未设置“radio-id”属性，我将需要测试“名称”和“值”是否匹配 2 或 3 个不同正则表达式中的任何 1 个。如果没有任何匹配，我会“返回”。否则，我将根据匹配的正则表达式执行其他代码。出于正则表达式的目的，“名称”和“值”可以通过将它们组合在一起进行测试：

radioName =  /* name attribute of element */;  
radioValue = /* value attribute of element */;  
teststr = radioName . ":" . radioValue;  

预定义正则表达式字符串可能是最简单的，例如：

var IDregexlist=new Array("/test1/","/test2/","/test3/"); /* example: "/ABC[0-9]+/", "/MNO[0-9]+/" ... */  
var NVregexlist=new Array("/test4/","/test5/","/test6/"); /* example: "/GHI:JKL[0-9]+/", "/GHI:STU[0-9]+/" ... */  

然后在 dorado 函数中，测试数组中每个项目的正则表达式匹配，例如：

for each (rexpr in IDregexlist) {... };

我不应该对大部分 JavaScript 代码有问题，除非我需要知道，在函数 dorado(rado){ ... } 中：

1. 如何获取元素的“ID”、“名称”和“值”（是否只是“rado.id”、“rado.name”和“rado.value”？）
2. 如何进行正则表达式匹配测试以及如何判断表达式是否匹配。

Answer 1

//radio matches any 1 of 3 regexes
var regexes = {valueRegex: /test/, idRegex: /\d/, nameRegex: /\w/};

var inputs = document.getElementsByTagName('input');
var radios = Array.prototype.filter.call(inputs, function(input) {
    return input.type === 'radio';
});

radios.forEach(function(radio) {
    doRado(radio);
});

function doRado(radio) {
    var keys = Object.keys(regexes);
    for(var i = 0, len = keys.length; i < len; i ++) {
        //which: if there's no ID, test name and value
        var which = radio.id || radio.name || radio.value;
        var match = which.match(regexes[keys[i]]);
        if(match) {
            //do something depending on which regex matched
            console.log(which + ' matched regex ' + keys[i]);
            break;
        }
    }
}

jsFiddle Demo