如何使用jQuery从HTML及字符串内容中替换img标签为其alt属性

嘿，这个需求用jQuery实现起来挺简单的，我分两种常见场景给你演示，不管是页面上已有的DOM元素还是你手里的HTML字符串都能轻松搞定：

如果你的内容已经在页面的某个容器里（比如一个带id="content"的div），直接用jQuery的replaceWith()方法遍历替换就行：

// 定位到目标容器下的所有img标签，逐个替换
$('#content img').replaceWith(function() {
  // 返回当前img标签的alt属性值，用来替换整个img标签
  return $(this).attr('alt');
});

举个例子，如果页面里的内容是：

<div id="content">
  Hello this is long content with multiple images <img alt=":*" src="kissing_heart.png"> and smiley is <img alt=":D" src="smiley.png">
</div>

运行上面的代码后，这个div里的内容就会变成：
Hello this is long content with multiple images :* and smiley is :D

如果你的内容是一个字符串形式的HTML（就像你给出的示例那样），我们可以先把字符串临时转换成jQuery对象，处理完再转回字符串：

// 你的原始HTML字符串
const originalHtml = 'Hello this is long content with multiple images <img alt=":*" src="kissing_heart.png"> and smiley is <img alt=":D" src="smiley.png">';

// 创建一个临时的div容器，把字符串塞进去转换成DOM结构
const $tempContainer = $('<div>').html(originalHtml);

// 替换所有img标签为对应的alt值
$tempContainer.find('img').replaceWith(function() {
  // 这里可以加个容错：如果没有alt属性，就用空字符串替代，避免出现undefined
  return $(this).attr('alt') || '';
});

// 提取处理后的文本字符串
const processedText = $tempContainer.html();

// 打印结果看看
console.log(processedText);

运行这段代码后，processedText的值就是你想要的最终文本啦。

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