Question

我正在使用AJAX。

我发出一个GET请求，该请求返回带有网页内容的原始HTML字符串。我正在尝试找到一种方法来提取div标记之间的所有元素：

<div role="main" class="main-container js-quickedit-main-content " style="padding:0px;margin:0px;"> 
    <!-- Trying to extract the children here -->
</div>

我尝试了以下正则表达式：

var div_result = result.match('(<div role="main" class="main-container js-quickedit-main-content " style="padding:0px;margin:0px;">)[^]*(</div>)').toString();

哪个不能正常工作。在div的{{1}}上有一个.main-container，其中包含此div 。当我使用 this div 时，它将返回父级div的{{1}}，而不是其自身的<\div>。

有什么方法可以提取只是第一次出现的div和<\div>和div标签之间的文本？

编辑：添加了正则表达式的预期结果和实际结果

这是应该返回的内容：

<div ..>

这实际上是返回的内容：

</div>

Answer 1

Regex is probably not the best way to go about this.

DOMParser现在在所有主要的浏览器中都得到广泛支持，并且允许您将HTML字符串转换为可以对其进行操作和执行操作的虚拟DOM元素（与其他任何真正的DOM元素相同）。 / p>

var htmlString = "<div role=\"main\" class=\"main-container js-quickedit-main-content\" style=\"padding:0px;margin:0px;\"><div>First child</div><div>Second child</div><div>Third child</div></div>";

var parser = new DOMParser();
var doc = parser.parseFromString(htmlString, "text/html");
var parent = doc.querySelector(".main-container");
var children = parent.childNodes;

children.forEach(child => console.log(child));

new DOMParser().parseFromString()方法接受两个参数，并返回一个虚拟HTML元素，您可以直接在javascript中进行操作，而无需 ever 在DOM中创建实际元素。第一个参数是要解析的字符串，第二个参数是文本内容的类型（它也可以解析XML）
我使用Node.childNodes来检索子元素
我使用element.querySelector()来选择class为main-container
我使用Array.prototype.forEach()来简单地注销已检索的子项

上面的htmlString变量等效于以下变量：

<div role="main" class="main-container js-quickedit-main-content" style="padding:0px;margin:0px;">
  <div>First child</div>
  <div>Second child</div>
  <div>Third child</div>
</div>

Answer 2

您的match返回匹配项数组，其中第一个元素是整个字符串，第二个元素是div打开标记，第三个元素是div关闭标记。您应该将标签之间的内容分组，并从数组中获取第二个元素：

var result = '<div role="main" class="main-container js-quickedit-main-content " style="padding:0px;margin:0px;">... </div>';
var div_result = result.match('<div role="main" class="main-container js-quickedit-main-content " style="padding:0px;margin:0px;">([^]*)</div>')[1].toString();
alert(div_result);

当然不要忘记检查是否找到匹配项

Javascript中两个不同字符串正则表达式之间的所有文本

2 个答案: