我如何 select 来自 html 的第一个 p 标签是一个字符串？

Question

我正在从无头 CMS 中获取内容，并且我以字符串形式获取内容，例如：

<div>
  <p>1st p tag</p>
  <p>2nd p tag</p>
</div>

如何 select 第一个 p 标签，这样我就可以拥有这样的东西：

const firstPtagContent = "1st p tag"

Answer 1

像这样的东西会起作用：

var firstParagraph = document.getElementById('container').getElementsByTagName('p')[0]
console.log(firstParagraph.textContent)

<div id="container">
  <p>1st p element</p>
  <p>2st p element</p>
</div>

Answer 2

您可以使用 DOMParser 解析字符串并使用 querySelector 获取第一个 p

const str = `<div>
  <p>1st p tag</p>
  <p>2nd p tag</p>
</div>`

let doc = new DOMParser().parseFromString(str, 'text/html')

console.log(
  doc.querySelector('p').textContent
)

Answer 3

您可以使用以下代码段。

var firstParagraph = document.getElementById('container').getElementsByTagName('p')[0]
console.log(firstParagraph.textContent)

p { outline: dotted  red } /* Just to show the widths */

<div id="container">
   <p>1st p tag</p>
   <p>2nd p tag</p>
</div>

Answer 4

您可以尝试这样的操作：

const str = `<div>
  <p>1st p tag</p>
  <p>2nd p tag</p>
</div>`

let doc = new DOMParser().parseFromString(str, 'text/html')

console.log(
  doc.querySelector('p').textContent
)

我如何 select 来自 html 的第一个 p 标签是一个字符串？

how do I select first p tag from html that is a string?

html

javascript

selectors-api