使用循环并找到html元素的值JavaScript

Question

我想使用vanilla js遍历一串html文本并获取其值。 使用jQuery我可以做这样的事情

var str1="<div><h2>This is a heading1</h2><h2>This is a heading2</h2></div>";
$.each($(str1).find('h2'), function(index, value) {
/// console.log($(value).text());
});

使用$(str)将其转换为html字符串，因为我理解它，然后我们可以使用.text()来获取元素(h2)的值。 但是我希望在后端的节点应用程序中而不是在客户端上执行此操作，因为它更高效（？）而且不依赖于jQuery也很好。

在某些情况下，我正在开发一个博客应用程序。 我想在对象服务器端创建一个目录。

Answer 1

这是使用.innerHTML另一种方式，但使用内置的可迭代协议

这是我们需要的操作，它们具有的类型以及该函数文档的链接

从文本创建HTML元素
String -> HTMLElement - 由set Element＃innerHTML提供
获取HTML元素的文本内容
HTMLElement -> String - 由get Element＃innerHTML提供
查找与查询选择器匹配的节点
(HTMLElement, String) -> NodeList - 由Element＃querySelectorAll提供
将节点列表转换为文本列表
(NodeList, HTMLElement -> String) -> [String] - 由Array.from提供

 // html2elem :: String -> HTMLElement const html2elem = html => { const elem = document.createElement ('div') elem.innerHTML = html return elem.childNodes[0] } // findText :: (String, String) -> [String] const findText = (html, selector) => Array.from (html2elem(html).querySelectorAll(selector), e => e.textContent) // str :: String const str = "<div><h1>MAIN HEADING</h1><h2>This is a heading1</h2><h2>This is a heading2</h2></div>"; console.log (findText (str, 'h2')) // [ // "This is a heading1", // "This is a heading2" // ] // :: [String] console.log (findText (str, 'h1')) // [ // "MAIN HEADING" // ] // :: [String]

Answer 2

解析HTML的最佳方法是使用DOM。 但是，如果您只拥有一个HTML字符串，根据此Stackoverflow成员，您可以创建一个“虚拟”DOM元素，您可以添加字符串以便能够操作DOM，如下所示：

var el = document.createElement( 'html' );
el.innerHTML = "<html><head><title>aTitle</title></head>
<body><div><h2>This is a heading1</h2><h2>This is a heading2</h2></div>
</body</html>";

现在，您有几种使用DOM访问数据的方法，如下所示：

 var el = document.createElement( 'html' ); el.innerHTML = "<html><head><title>aTitle</title></head><body><div><h2>This is a heading1</h2><h2>This is a heading2</h2></div></body</html>"; // one way el.g = el.getElementsByTagName; var h2s = el.g("h2"); for(var i = 0, max = h2s.length; i < max; i++){ console.log(h2s[i].textContent); if (i == max -1) console.log("\\n"); } // and another var elementList = el.querySelectorAll("h2"); for (i = 0, max = elementList.length; i < max; i++) { console.log(elementList[i].textContent); }

您还可以使用正则表达式，如下所示：

 var str = '<div><h2>This is a heading1</h2><h2>This is a heading2</h2></div>'; var re = /<h2>([^<]*?)<\\/h2>/g; var match; var m = []; var i=0; while ( match = re.exec(str) ) { m.push(match.pop()); } console.log(m);

正则表达式由一个开头的H2标签组成，后面跟不是“<”，然后是一个结束的H2标签。 “*？” 考虑零个或多个实例，其中至少有一个或一个实例。

Stackoverflow的每个Ryan ：

具有全局正则表达式的exec意味着在循环中使用，因为它仍将检索所有匹配的子表达式。

正则表达式的关键部分是根据MDN的“g”标志。 它允许exec（）方法获取给定字符串中的多个匹配项。 在每次循环迭代中，匹配变为包含一个元素的数组。 当弹出每个元素并将其推到m上时 ，数组m最终包含所有捕获的文本值。

使用循环并找到html元素的值JavaScript

问题描述

2 个解决方案

解决方案1
2 2018-01-03 21:03:29

解决方案2
1 2018-01-03 01:55:05

使用循环并找到html元素的值JavaScript

问题描述

2 个解决方案

解决方案1 2 2018-01-03 21:03:29

解决方案2 1 2018-01-03 01:55:05

解决方案1
2 2018-01-03 21:03:29

解决方案2
1 2018-01-03 01:55:05