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

时间:2018-01-02 23:36:39

标签: javascript jquery

我想使用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 也不错

在某些情况下,我正在开发一款博客应用。我想在目标服务器端创建一个目录。

2 个答案:

答案 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访问数据,如下所示:

&#13;
&#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;
&#13;

您也可以使用正则表达式,如下所示:

&#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;
&#13;
&#13;

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

Stackoverflow的每Ryan次:

  具有全局正则表达式的

exec意味着在循环中使用,   因为它仍将检索所有匹配的子表达式。

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