如何避免textarea中显示<br>标签同时保留原有内容格式

问题原因 #

textarea 是纯文本控件，无法解析 <br>、  这类 HTML 语义标签，只会将其作为普通字符串原样展示，它仅支持通过纯文本的 换行符\n 和普通空格控制排版。

解决方案 #

方案1：优化数据库存储逻辑（最推荐） #

不要直接将带 HTML 格式标签的内容存入数据库，改为存储无 HTML 标签的原始纯文本：

• 用\n代替<br>表示换行
• 用普通空格代替 表示缩进
  输出时根据场景做适配：
• 输出到 HTML 页面（如表格展示）：将\n替换为<br>、空格按需替换为 即可正常渲染
• 输出到 textarea：直接输出原始纯文本，天然保留换行、空格排版，不会出现多余标签

方案2：存量数据兼容方案 #

如果已有大量存量带 HTML 标签的数据无法修改存储逻辑，只需在输出到 textarea 前做一次字符替换即可：

1. 将所有<br>（含大小写、带闭合斜杠的变体）替换为换行符\n
2. 将所有 替换为普通空格
3. 把处理后的字符串赋值给 textarea

代码示例

PHP 后端处理示例：

$textarea_content = str_replace(['<br>', '<br/>', '<br />', '&nbsp;'], ["\n", "\n", "\n", " "], $receipt);

JS 前端处理示例：

const textareaContent = receipt.replace(/<br\s*\/?>/gi, '\n').replace(/&nbsp;/g, ' ');
document.querySelector('textarea').value = textareaContent;

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