uni-app中过滤器无法直接处理换行符，因Vue 3已移除全局过滤器支持，且text组件不解析HTML；必须用rich-text组件配合replace将\n转为或CSS white-space: pre-wrap实现换行。
uni-app里过滤器无法直接处理换行符？先确认运行环境
过滤器（filters）在 Vue 2 的 uni-app 项目中可用，但 Vue 3 + Composition API 默认不支持全局过滤器——它已被移除。如果你用的是 Vue 3 模板（setup 语法），filters 根本不会生效，这是最常踩的坑。
所以第一步不是写过滤器，而是查清项目版本：
- 打开
package.json，看"@vue/compiler-sfc"或"vue"版本：≥3.0 就是 Vue 3，过滤器已废弃 - 检查
main.js是否调用了app.config.globalProperties.$filters = {...}—— Vue 3 中需手动挂载才“模拟”支持 - 微信小程序端对
v-html渲染<br>
有限制：仅rich-text组件能安全解析 HTML 标签，text或view里写<br>会被原样显示为字符串
Vue 2 项目：用过滤器把 \n 转成 <br>，但必须配合 rich-text
即便写了过滤器，text 标签也**不会解析 HTML**，哪怕你返回 "第一行<br>第二行"，它只会当纯文本渲染。真正起作用的只有 rich-text 组件。
示例写法（仅适用于 Vue 2）：
// main.js
Vue.filter('nl2br', function(value) {
if (!value) return ''
return value.replace(/\n/g, '<br>')
})
<rich-text :nodes="content | nl2br" /> // 注意：这里 content 是字符串，不是 v-html 那种字符串插值
-
rich-text的nodes接收的是节点数组或 HTML 字符串，传字符串时会自动解析<br> - 别写
<rich-text v-html="...">——v-html在 uni-app 各端都不被支持 - 如果后端返回的是带
\r\n的 Windows 换行，正则建议写成/[\r\n]+/g更鲁棒
Vue 3 项目：用 computed 或工具函数替代过滤器
Vue 3 没有 filters，得用响应式计算或封装函数。关键是：依然只能交给 rich-text 渲染，不能塞进 text。
推荐写法（在 setup 中）：
const formattedContent = computed(() => {
return props.content?.replace(/[\r\n]+/g, '<br>') || ''
})
<rich-text :nodes="formattedContent" />
- 别用
String.prototype.replaceAll：H5 和小程序基础库低版本不支持，replace(/\n/g, ...)更稳 - 如果内容含用户输入的富文本（比如带
<span>），直接replace可能破坏标签结构，此时应先 DOM 解析再处理文本节点——但多数场景没必要，简单换行就够了 - App 端（iOS/Android）对
rich-text的<br>支持良好；H5 端注意不要给rich-text设white-space: nowrap，否则<br>失效
为什么不用 text + CSS 实现换行？什么时候该换思路
text 组件默认 white-space: nowrap，设 white-space: normal 确实能让长文本自动折行，但它**完全忽略原始 \n**——所有换行符都被当空格处理。也就是说，你输入 “A\nB”，它会显示成 “A B”，而不是换行。
- 需要保留段落结构（如评论、日志、协议条款）→ 必须用
rich-text+\n → <br> - 只是防止超长单词溢出容器 → 用
word-break: break-word或overflow-wrap: break-word配合text即可，不用动换行符 - 输入框（
textarea）本身支持\n，但展示时若用text渲染，仍需走rich-text转义路径
真正容易被忽略的点是：rich-text 不支持内联样式（比如 style="color:red"），也不支持 script 或 iframe，安全策略严格。如果业务需要高亮关键词或点击跳转，就得自己用 view + text 拆分渲染，而不是依赖 rich-text 一揽子解决。
