javascript - 使用循环并查找 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 的另一种方式，但使用内置的 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]