javascript - 从没有jquery的字符串中获取标签内容

Question

我有像这样的字符串:

string = `<div>
	  <div>This is not to be used</div>
	  <div id="takeThis">
		  <p>Some content</p>
		  <div>Some more content<div>
		  ...
	  </div>
	  <div>Also not relevant
	  </div>
	</div>`
  
// TODO get the content 'Some content' and 'Some more content'

普通JS我想提取 id="takeThis"内容为字符串。

我试过:

1. RegExp喜欢:<div\sid=\"takeThis\">([\s\S]*)<\/div> - 问题是它需要第一次或最后一次出现 </div> - 不是整个 div 节点
2. const parser = new DOMParser(); const doc = parser.parseFromString(str, 'text/html'); DOMParser似乎剥离id属性。

编辑:我有字符串 - 不是 Html

我发现我的第二种方法有效，但并非在所有情况下都有效。我必须调查一下。

Answer 1

您可以使用 Element.querySelector()在创建的 div

上

Returns the first element that is a descendant of the element on which it is invoked that matches the specified group of selectors.

var str = `<div>
  <div>First
  </div>
  <div id="takeThis">
      <p>sad</p>
      <div> sd asd asda sd asdd dsfsdf sdf<div>
  </div>
  <div>
  </div>
</div>`

const div = document.createElement('div'); 
div.innerHTML = str;

console.log(div.querySelector('#takeThis').textContent)