正则表达式将输入标签拉出表单[重复]答案

【问题标题】：Regexp to pull input tags out of form [duplicate]正则表达式将输入标签拉出表单[重复]
【发布时间】：2010-10-27 03:33:24
【问题描述】：

我正在尝试从<form> 标记中提取所有<input > 标记。我创建了一个正则表达式，它可以识别整个 <form> 标记和直到结尾 </form> 的所有代码，但我不知道如何匹配其中的所有 <input[^>]+>。

编辑：数据是一个字符串。我不能使用 DOM 函数，因为它不是文档的一部分。如果我将它插入隐藏标签，它会改变页面的布局，因为该字符串包含整个 HTML 页面，包括指向外部样式表的链接。

【问题讨论】：

请问您打算如何处理结果。可能有另一种比正则表达式更好的方法
我同意。正则表达式在处理 HTML 等嵌套语法方面是出了名的差。
是的，我知道......我正在做的是试图将标签从 AJAX 结果中拉出来。但是 AJAX 结果是一个字符串，所以我不能在它上面使用 DOM 函数。见stackoverflow.com/questions/855404/…
@Ayman，感谢您清理我的问题，我没想过要使用 backtics！

标签： javascript regex

【解决方案1】：

您可以使用document.createElement 创建一些元素，然后（ab）使用它的innerHTML 属性从字符串创建一个DOM：

var html = document.createElement("div");
html.innerHTML = "<form><input/><input/><input/></form>";

// now you can use dom methods, e.g. getElementsByTagName
var inputs = html.getElementsByTagName("input");
var foo = inputs[0].value; // ...

您可能必须事先手动删除您的 <html> 标签，因为 IE 无法解析完整文档（如果我没记错的话）。

【讨论】：

【解决方案2】：

为什么不能只使用 DOM？

var inputFields = document.getElementById('form_id').getElementsByTagName('input');
for (var i = 0, l = inputFields.length; i < l; i++) {
    // Do something with inputFields[i] ...
}

如果你必须使用正则表达式：

var formHTML = document.getElementById('form_id').innerHTML;
var inputs = formHTML.match(/<input.+?\/?>/g);

注意，上面的正则表达式并不可靠，在所有情况下都不起作用，因此为什么应该使用 DOM！ :)

【讨论】：

希望我可以使用 DOM。问题是我有一个字符串而不是 Document 对象。将字符串插入文档会导致文档布局发生变化。知道任何将 HTML 字符串解析为 Document 对象而不渲染它的方法吗？
你可以在隐藏的 iframe 中渲染它...
@J-P 在该元素上使用 document.createElement() 和 innerHTML 是可能的。见stackoverflow.com/questions/855404/…

【解决方案3】：

正则表达式根本不擅长解析 HTML（请参阅 Can you provide some examples of why it is hard to parse XML and HTML with a regex? 了解原因）。您需要的是一个 HTML 解析器。有关使用各种解析器的示例，请参阅 Can you provide an example of parsing HTML with your favorite parser?。

【讨论】：

我实际上刚刚读过。知道使用 javascript 将字符串转换为可以使用 DOM 函数的 Document 对象的任何方法吗？该字符串是 HTML，而不是 XML，我无法将其插入页面，也无法使用 iFrame。 (stackoverflow.com/questions/855404/…)
@Josh 不，我不知道（JavaScript 真的是我的事），但这是一个有趣的问题。要是有地方问有趣的问题就好了……
@Chas。谢谢！实际上我正在阅读 jQuery 的源代码——在您提供的第二个链接上，有人声称他们能够使用 jQuery 做到这一点。
那应该是“JavaScript 真的不是我的东西”。
@Chas。 Owens——我使用 DOM 解析找到了答案。这是我以前想做的，但不知道怎么做。或者更确切地说，弄清楚了如何但肯定在其他地方出现了错误，并认为我试图做的事情是不可能的。谢谢！