如何用JavaScript替换textarea中的多个<blockquote>标签为换行或指定字符

核心实现代码 #

下面是完整的原生JS代码，支持自定义分隔符（换行\n、<br/>或其他字符）：

// 获取页面中所有blockquote元素
const blockquotes = document.querySelectorAll('blockquote');
// 获取目标textarea元素（假设其id为targetTextarea，可根据实际修改选择器）
const textarea = document.getElementById('targetTextarea');

// 自定义分隔符：可选'\n'（换行）、'<br/>'、'---'等任意字符/字符串
const separator = '\n';

// 处理blockquote内容并拼接
const processedContent = Array.from(blockquotes)
  .map(quote => quote.textContent.trim()) // 提取文本并去除首尾空白
  .filter(content => content) // 过滤空内容的blockquote，避免多余分隔符
  .join(separator);

// 将结果填充到textarea
textarea.value = processedContent;

关键细节说明 #

• 元素选择：document.querySelectorAll('blockquote')等价于jQuery的$('blockquote')，能获取页面所有blockquote元素；目标textarea可根据实际场景改用document.querySelector('textarea.class-name')等选择器。
• 内容处理：
  • 用Array.from()把NodeList转为数组，方便调用数组的map、filter方法；
  • trim()避免blockquote内容首尾的多余空白影响拼接结果；
  • filter过滤空内容的blockquote，防止出现连续分隔符。
• 分隔符自定义：直接修改separator变量即可切换分隔符——比如用<br/>时，textarea会保存该字符串；若要让textarea显示换行效果，优先用\n。

扩展：保留blockquote内的HTML格式 #

如果需要保留blockquote里的HTML结构（比如加粗、链接），把textContent换成innerHTML即可：

const processedContent = Array.from(blockquotes)
  .map(quote => quote.innerHTML.trim())
  .filter(content => content)
  .join(separator);

textarea.value = processedContent;

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