javascript - HTML 名称属性的正则表达式

Question

我正在尝试编写一个正则表达式脚本，该脚本将解析 HTML 名称属性并将每个嵌套数组作为匹配项返回。这是一个例子：

<input type="text" name="contact[email]" />
<input type="text" name="contact[address][street]" />

我需要一些 javascript 正则表达式来解析它们并以这种方式匹配它们

Match 1: contact Match 2: email
Match 1: contact Match 2: address Match 3: street

这是我当前的正则表达式：

/(^.*?)(\[(.*?)\])?$/

谢谢！

Answer 1

我认为最简单的方法是

var str = "contact[email]"
str.match(/\w+/g)
//=> ["contact", "email"]

var str = "contact[address][street]"
str.match(/\w+/g)
//=> ["contact", "address", "street"]

Answer 2

我要做的就是用它来划分你的每个人name，[] 所以它会是这样的：

<input type="text" name="[contact][email]" />
<input type="text" name="[contact][address][street]" />

然后我将它用于正则表达式：

(?:\[)(.*?)(?:\])

我的解决方案减少了所需的操作数量，并使您的命名约定更加直接。name每个匹配项将代表该部分中的一个单独条目

Answer 3

使用以下正则表达式：

/(^[^\[]+)(?=\[)|(([^\[\]]+)(?=\]))/g

下面的示例用法。

演示小提琴在这里。

HTML：

<input id="one" type="text" name="contact[email]" />
<input id="two" type="text" name="contact[address][street]" />

JavaScript：

var regex = /(^[^\[]+)(?=\[)|(([^\[\]]+)(?=\]))/g;

var nameOne = document.getElementById('one').getAttribute('name');
console.log('one: ', nameOne.match(regex));
var nameTwo = document.getElementById('two').name;
console.log('two: ',nameTwo.match(regex));

输出：

one: ["contact", "email"]
two: ["contact", "address", "street"] 

Answer 4

<input type="(?<type>[A-Za-z0-9]+)" name="(?<Name>[A-Za-z0-9\[\]]+)" />

工作正常。我附上了图片以显示如何工作

因为每个值将在 RegexMatch 之后在数组中返回，那么你可以这样做

var first = RegexMatch.Groups["Name"].Split('[')[0];

您将获得name="contact[address][street]", first = "contact" 中的第一个值，然后您可以执行

var second = regexMatch.Groups["Name"].Split('[')[1];
then second = "address";

顺便说一句，这是针对 C# 的，请转换为 javascript！

Answer 5

我喜欢使用 split() 来获取中间块而不是更复杂的 RegExp：

var strFormHTML='<input type="text" name="contact[email]" /><input type="text" name="contact[address][street]" />';
var names = strFormHTML.split(/[\W\w]+? name=\"([^"]+)\"[\w\W]+?/).filter(Boolean).slice(0,-1); 
alert(names); //shows: "contact[email]", "contact[address][street]"