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]

Answer 2

解析HTML的最佳方法是使用DOM。但是，如果您拥有的是一串HTML，根据此Stackoverflow member），您可以创建一个＆＃34;虚拟＆＃34;您要添加字符串以便能够操作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访问数据，如下所示：

＆＃13;

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);
    }

＆＃13;

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

＆＃13;

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);

＆＃13;

正则表达式由一个开头H2标签后跟一个＆＃34;＆lt;＆＃;;然后是一个结束H2标签。＆＃34; *？＆＃34;考虑零个或多个实例，其中至少有一个或一个实例。

Stackoverflow的每Ryan次：

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

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

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

2 个答案: