使用循环并查找 html 元素的值 JavaScript答案

【问题标题】：Use loop and find html element's values JavaScript使用循环并查找 html 元素的值 JavaScript
【发布时间】：2018-01-02 23:36:39
【问题描述】：

我想使用 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 也很好.

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

【问题讨论】：

您的问题到底是什么？你想达到什么目标？
为什么在没有 DOM 的服务器上有 DOM 节点？
嗯 jQuery 应该在后端工作，但考虑到不依赖它，你可能不得不使用一些正则表达式来查找每个元素标签，或者通过一些文档解析器解析它的最简单方法，你可以检查此类解析器的 npm 站点
@ScottMarcus 可能是网页抓取，例如
Cheerio 可以做到这一点，但是 afaik 它不允许进行一些诸如类操作之类的事情。 github.com/cheeriojs/cheerio

标签： javascript jquery

【解决方案1】：

这是使用.innerHTML 的另一种方式，但使用了内置的iterable protocol

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

从文本创建 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]

【讨论】：

【解决方案2】：

解析 HTML 的最佳方式是使用 DOM。但是，如果您只有一个 HTML 字符串，根据 Stackoverflow member)，您可以创建一个“虚拟”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 标记，后跟不是一个“

每个 Stackoverflow 的 Ryan：

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

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

【讨论】：