与元素 ID 或元素名称/值匹配的正则表达式搜索
Regex search matching an element-ID, or element-Name/Value
我想创建一个脚本(JavaScript)来枚举所有"radio"元素,搜索那些具有与某些正则表达式匹配的"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。此脚本将另存为 Web 浏览器快捷方式(书签/收藏夹)的"URL"。这通常被称为"书签"(或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 17:48 (CT), 提供更多详细信息。
稍微澄清一下..."radio-id"属性应唯一标识"radio"类型的页面上的每个"<input"
元素。在某些情况下,"<input"
元素可能没有设置其"ID"属性。在这些情况下,我必须一起检查"无线电名称"和"无线电值",因为在单选按钮组合在一起以供选择的情况下,"无线电名称"不会唯一标识每个无线电元素作为"许多中的一个"("无线电名称"对于所有分组的无线电元素通常是相同的),并且页面上的许多无线电元素的"无线电值"可能相同。
因此,当我检查每个"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){ ... }:
- 如何获取元素的"ID"、"名称"和"值"(这只是"rado.id"、"rado.name"和"rado.value"吗?
- 如何进行正则表达式匹配测试以及如何判断表达式是否匹配。
//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 演示
- 正则表达式条件来删除元素
- 如何使用正则表达式按类获取svg元素
- javascript正则表达式,用于编辑元素内部的css样式属性
- 用于提取 HTML 标记子元素的正则表达式
- 与任何元素的 .innerHTML 属性匹配的 JavaScript 正则表达式
- 输入元素模式属性的Javascript正则表达式在reFiddle上有效,但在页面上无效
- Javascript正则表达式:从头到尾将span元素与某个类进行匹配
- Javascript从某些元素中提取日期与匹配和正则表达式返回空数组
- 正则表达式用于从转换矩阵中选择元素
- 在 javascript 正则表达式中返回多个元素
- 如何使用正则表达式按名称选择元素
- 使用正则表达式拆分会在数组中创建 2 个空元素
- 如何在 CKeditor 中突出显示与正则表达式匹配的元素
- 与元素 ID 或元素名称/值匹配的正则表达式搜索
- 如何在元素上应用多个正则表达式
- 如何使用正则表达式对输入元素的name属性调用onclick函数
- 如何使用javascript正则表达式反向未知数量的固定长度元素,而不进行任何分隔
- Javascript正则表达式获取元素
- 如何使用正则表达式匹配url路径和可选元素
- 检查元素是否包含字符串,并且除了字符串什么都没有-可能是正则表达式