如何使用jQuery解析XML中的HTML？附XML示例代码

嘿，我来帮你搞定这个问题！用jQuery解析XML里的内容（包括嵌套的HTML/CDATA内容）其实很简单，我给你一步步拆解，再配上示例代码，你一看就懂。

核心步骤说明 #

1. 加载XML文件：用jQuery的AJAX方法获取XML资源，指定dataType: 'xml'让jQuery自动把XML解析成DOM对象。
2. 遍历目标节点：用find()和each()方法遍历你需要的节点（比如你的<item>节点）。
3. 提取各类内容：
   • 普通文本节点（比如<title>、<link>）直接用.text()提取即可。
   • 带CDATA包裹的节点（比如你的<dc:creator>）同样用.text()，jQuery会自动处理CDATA里的内容，不用额外转义。
   • 包含HTML代码的CDATA内容（比如常见的<description>节点），提取后可以用.html()插入到页面，直接渲染成可视化的HTML。
4. 处理命名空间节点：像<dc:creator>这种带命名空间的节点，jQuery里要写成dc\\:creator（转义冒号），或者同时写creator来兼容不同的解析场景。

完整示例代码 #

假设你的XML文件结构和你给出的一致，我们来写具体的解析逻辑：

// 加载并解析XML文件
$.ajax({
  url: '你的XML文件路径.xml', // 替换成实际的XML文件地址
  dataType: 'xml',
  success: function(xml) {
    // 遍历所有<item>节点
    $(xml).find('item').each(function() {
      // 提取各个字段内容
      var itemTitle = $(this).find('title').text();
      var itemLink = $(this).find('link').text();
      var itemCreator = $(this).find('dc\\:creator, creator').text();
      var pubDate = $(this).find('pubDate').text();
      // 如果有带HTML的描述节点（比如<description><![CDATA[<p>...</p>]]></description>）
      var itemContent = $(this).find('description').text();

      // 把解析后的内容组装成HTML，插入到页面容器里
      var newsItem = `
        <div class="news-card">
          <h2>${itemTitle}</h2>
          <p class="meta">发布时间：${pubDate} | 作者：${itemCreator}</p>
          <a href="${itemLink}" class="detail-link">查看原文</a>
          <div class="content">${itemContent}</div>
        </div>
      `;
      $('#news-container').append(newsItem);
    });
  },
  error: function(xhr, status, err) {
    console.log('加载XML出错啦：', err);
  }
});

额外注意事项 #

• 跨域问题：如果XML文件和你的网页不在同一个域名下，浏览器会有跨域限制，这时候需要在XML所在的服务器设置CORS规则，或者用后端代理转发请求。
• 直接解析XML字符串：如果你的XML是字符串形式（不是外部文件），可以先用$.parseXML()转成DOM对象再处理：

  var xmlStr = '<rss><item>...</item></rss>'; // 你的XML字符串
  var xmlDoc = $.parseXML(xmlStr);
  var $xml = $(xmlDoc);
  // 接下来和上面一样遍历$xml.find('item')即可
  

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