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"的内容提取为字符串。

我尝试过：

RegExp类似于：<div\sid=\"takeThis\">([\s\S]*)<\/div>-问题在于它需要首先或最后出现</div>-而不是整个div节点
const parser = new DOMParser(); const doc = parser.parseFromString(str, 'text/html'); DOMParser似乎剥夺了id属性。

编辑：我有字串-不是HTML

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

Answer 1

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

返回第一个元素，该元素是与指定选择器组匹配的在其上被调用的元素的后代。

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)

Answer 2

HTML

<div id="takeThis">
    <p>sad</p>
    <div>
        <div>hello</div>
        sd asd asda sd asdd dsfsdf sdf
    </div>
</div>

JS

要通过ID获取元素的文本内容：

const takeThis = document.getElementById('takeThis').textContent;

使用通用查询选择器获取元素的文本内容：

const takeThis = document.querySelector('#takeThis').textContent;

这将为您提供所有嵌套内容的文本内容，而不管嵌套的多层级别。

如果要获取HTML内容，可以使用innerHTML代替textContent。

Answer 3

此处为正则表达式的粉丝提供代码：

let string = `<div>
	  <div>This is not to be used</div>
	  <div id="takeThis">
		  <p>Some content</p>
		  <div>Some more content</div>
          <p> A good content </p>
		  <div class="test1">Test more</div>
		  <p class="abc" id="abcp">Good content</p>
	  </div>
	  <div>Also not relevant
	  </div>
	</div>`;
  
// TODO get the content 'Some content' and 'Some more content'
let regex = /<div id="takeThis">((((.|\n)*?)<div .*?>(.|\n)*?(<\/div>)((.|\n)*?))*)<\/div>/i;
string.replace(regex, function(match){
    // console.log(match);
    console.log(match.replace(/\s*<\w.*?>\s*/g,'').replace(/\s*<\/.*?>\s*/g,'\n'));
});

从没有jQuery的字符串中获取标签内容

3 个答案: