如何用jQuery获取id为mydata下class为myheader的内部内容？

嘿，这事儿好办！你可以借助浏览器原生的DOMParser API来处理这段HTML字符串，把它转换成可操作的DOM结构后，就能轻松定位并提取目标内容了。

浏览器环境下的实现代码 #

function findit() {
  var str = `<div id="mydata"><div class="myheader"><p>Get all <strong>this</strong> content</p></div></div>`;
  
  // 1. 创建DOMParser实例，用来解析HTML字符串
  const parser = new DOMParser();
  // 2. 将字符串解析为完整的HTML文档对象
  const htmlDoc = parser.parseFromString(str, 'text/html');
  // 3. 用CSS选择器定位目标元素：id为"mydata"下的class为"myheader"的元素
  const targetEl = htmlDoc.querySelector('#mydata .myheader');
  // 4. 提取该元素的内部HTML内容
  const desiredContent = targetEl.innerHTML;
  
  console.log(desiredContent); // 输出: <p>Get all <strong>this</strong> content</p>
}

findit();

如果是在Node.js环境中 #

浏览器的DOMParser在Node里不可用，这时候可以用jsdom库来模拟DOM环境：

1. 先安装依赖：npm install jsdom
2. 然后用以下代码实现：

const { JSDOM } = require('jsdom');

function findit() {
  var str = `<div id="mydata"><div class="myheader"><p>Get all <strong>this</strong> content</p></div></div>`;
  
  // 用JSDOM解析HTML字符串
  const dom = new JSDOM(str);
  // 从模拟的window对象中获取document，后续操作和浏览器一致
  const targetEl = dom.window.document.querySelector('#mydata .myheader');
  const desiredContent = targetEl.innerHTML;
  
  console.log(desiredContent);
}

findit();

关键说明 #

• querySelector('#mydata .myheader')这个选择器的意思是：先找到id为mydata的元素，再在它的子元素里找class为myheader的元素，完全符合你的需求。
• innerHTML会返回元素内部的所有HTML代码，包括嵌套的标签，正好匹配你期望的输出结果。

内容的提问来源于stack exchange，提问作者user9273032