使用jQuery提取XML中CDATA内p标签文本并仅渲染首个p标签的问题求助

嘿，我懂你的需求啦——现在你能成功渲染CDATA里的内容，但还带着<p>标签，只想保留第一个<p>里的纯文本对吧？咱们来调整下代码就能轻松搞定！

核心思路 #

你当前拿到的my_description是包含HTML标签的字符串，所以关键步骤是：先把这个字符串转换成可操作的DOM节点，再精准定位到第一个<p>标签，最后提取它的纯文本内容。

修改后的完整代码 #

$(document).ready(function() {
 $.ajax({
 url: "https://somethignsomething.com",
 dataType:'xml',
 type:'GET',
 success: function(result) {
 var my_blog = $(result).find('channel item').first();
 console.log(result)
 var my_title = my_blog.find('title').text();
 
 // 重点修改：处理description内容，提取第一个<p>的纯文本
 var descriptionHtml = my_blog.find('description').text();
 var parsedDescNodes = $.parseHTML(descriptionHtml);
 var firstPTag = $(parsedDescNodes).filter('p').first();
 var my_description = firstPTag.length ? firstPTag.text() : '';
 
 var img = my_blog.find('content\\:encoded, encoded').text();
 img = $.parseHTML(img);
 img = img[0].firstChild.src;
 var oldSrc = 'https://cdn11.net/m/resources/img/teaser/rht-full-blogteaser-medium-smartphones-290x268.jpg';
 var newSrc = img;
 $('img[src="' + oldSrc + '"]').attr('src', img);
 $('.text-content').replaceWith(
 $('<h2 />',{ text: my_title }),
 $('<p />',{ text: my_description }),
 )
 },
 error: function(error) {
 console.log(error);
 }
 });
});

关键步骤说明 #

1. 解析HTML字符串：用$.parseHTML()把description的文本内容转换成DOM节点数组，这样就能像操作页面元素一样筛选标签；
2. 定位第一个

   ：通过filter('p').first()精准找到第一个<p>标签，避免提取到其他多余的段落；

3. 容错处理：加了firstPTag.length ? ... : ''的判断，如果description里没有<p>标签，也不会报错，只会返回空字符串。

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