截取含img标签的文本节点时，如何阻止浏览器下载图片？

嘿，我懂你遇到的这个糟心问题——明明没把完整的文章内容渲染到页面上，浏览器却还是偷偷下载了post.content.rendered里的图片。这事儿的根源其实在jQuery解析HTML的方式上：

当你用$(post.content.rendered)的时候，jQuery会在浏览器内存里把这段HTML转换成DOM元素。哪怕这些元素从来没被添加到页面中，浏览器只要解析到<img>标签，就会自动发起图片请求——这是浏览器的原生行为，和你是否展示内容没关系。

怎么解决？跳过HTML解析，直接提取纯文本 #

我们不需要让浏览器解析整个HTML片段，而是先把所有HTML标签剥离，直接拿到纯文本内容，再截取前75个字符。这样就不会触发图片请求了。

修改你的摘要处理代码 #

把原来的这一行：

var excerptText = $(post.content.rendered).text().substring(0,75);

替换成下面的逻辑：

// 第一步：用正则移除所有HTML标签（包括<img/>这类自闭合标签）
var plainText = post.content.rendered.replace(/<[^>]+>/g, '');
// 第二步：去掉文本首尾的空白字符，避免截取到无效的换行/空格
var trimmedText = plainText.trim();
// 第三步：截取前75个字符
var excerptText = trimmedText.substring(0, 75);
// 可选：如果原文本长度超过75，给截取的内容加个省略号（不过你已经有Read More链接，可按需调整）
if (trimmedText.length > 75) {
  excerptText += '...';
}

完整的修改后代码片段 #

放到你的success回调里对应的位置：

// ... 其他代码保持不变 ...
var date = new Date(post.date).toDateString();
$(small).text(date);
$(title).text(post.title.rendered);

// 替换这里的摘要生成逻辑
var plainText = post.content.rendered.replace(/<[^>]+>/g, '');
var trimmedText = plainText.trim();
var excerptText = trimmedText.substring(0, 75);
if (trimmedText.length > 75) {
  excerptText += '...';
}

$(excerpt).text(excerptText);
$(excerpt).append(readMore);
// ... 其他代码保持不变 ...

额外小贴士 #

• 这个正则表达式<[^>]+>能覆盖绝大多数HTML标签场景，足够应对WordPress返回的内容格式。
• 如果之后遇到更复杂的HTML（比如带有特殊属性的标签），也可以用原生DOMParser结合文档片段，但对于你的需求来说，正则已经简单又高效。

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