我想使用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 也不错
在某些情况下,我正在开发一款博客应用。我想在目标服务器端创建一个目录。
答案 0 :(得分:2)
这是使用.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]
答案 1 :(得分:1)
解析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访问数据,如下所示:
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;
您也可以使用正则表达式,如下所示:
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 最终包含所有捕获的文本值。