Question

我的字符串中包含一些 HTML 我想获得前两段

<p>content</p><p>content 2</p>

最简单的方法是什么？

Answer 1

两个例子：

var string = "<p>content</p><p>content 2</p>";




// EXAMPLE 1
var parser = new DOMParser().parseFromString(string, "text/html");
var paragraphs = parser.getElementsByTagName('p');

for(var i=0; i<paragraphs.length; i++){
  console.log( paragraphs[i].innerHTML ); // or use `outerHTML`
}
// "content"
// "content 2"



// EXAMPLE 2
var el = document.createElement("div");
el.insertAdjacentHTML('beforeend', string);  
var paragraphs = el.getElementsByTagName('p');

for(var i=0; i<paragraphs.length; i++){
  console.log( paragraphs[i].innerHTML ); // or use `outerHTML`
}
// "content"
// "content 2"

如果你想真正得到

// "<p>content</p>"
// "<p>content 2</p>"

只需将innerHTML替换为outerHTML

如果你想操纵当前的HTMLParagraphElement而不是简单地使用paragraph[i]

Answer 2

创建一个DOM元素并将html放入其中，如下所示：

var element = document.createElement('div');
element.innerHTML = "<html><p>content</p></html>"

然后，您可以将所需的部件作为NodeList获取：

element.getElementsByTagName('p');

Answer 3

这也可以使用jQuery来完成：

var example = "<div><p>Paragraph 1</p><p>Paragraph 2</p></div>";
var parsed = $(example);
parsed.find("p"); //Returns all <p> elements
parsed.find("p")[0]; //Returns the first <p> element
parsed.find("p")[1]; //Returns the second <p> element

从变量字符串中获取HTML元素

3 个答案: