Question

我想创建一个脚本（JavaScript）来枚举所有“radio”元素，搜索那些具有与某些正则表达式匹配的“ID”（或者可能是“Name”和“Value”）的元素。如果匹配，我将根据匹配的正则表达式执行其他代码。通过“ID”搜索应该比通过“Name”和“Value”搜索更容易，但在某些情况下元素没有“ID”，所以在这些情况下，我会通过“Name”搜索正则表达式匹配“和”价值“。

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

<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都是在下面编写的。此脚本将保存为Web浏览器快捷方式（书签/收藏夹）的“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]); 
  } 
} 
)();

<小时/>
已编辑： 9/11/2013 5:48 PM（CT），提供了其他详细信息。

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

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

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

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

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) {... };

除了我需要知道的，在函数dorado（rado）{...}中我不应该对大部分JavaScript代码有任何问题：

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

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

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

1 个答案: