textarea切换文本方向时带%标识的自定义标签结构损坏如何解决

数据老陈

2026-10-13

问题原因

这是Unicode双向排版算法（Bidi）的正常表现：%属于无明确方向的中性字符，在RTL（右到左）的文本上下文中，会跟随相邻的强方向字符调整渲染顺序，所以你看到的标签结构错乱只是显示层面的渲染异常，textarea实际存储的value本身还是正确的，只是不符合编辑场景的视觉需求。

可行解决方案

方案1：给自定义标签包裹双向控制字符（适配原生textarea、富文本编辑器）
插入自定义标签时，在标签前后分别加上左至右嵌入符（\u202A）和弹出符（\u202C），强制标签整体按LTR方向渲染，不受外层RTL上下文影响：
```
// 插入标签的处理逻辑
const tag = '%%voucher?id=1%%'
const wrappedTag = '\u202A' + tag + '\u202C'
// 插入到textarea/富文本编辑器中
```
提交或存储内容时，过滤掉这两个控制字符即可得到原始标签内容，无业务侵入性：
```
const rawContent = textarea.value.replace(/\u202A|\u202C/g, '')
```
方案2：用不可编辑占位元素替代纯文本标签（适配富文本编辑器）
如果使用tinyMCE、CKEditor这类富文本编辑器，直接插入带contenteditable="false"属性的自定义内联元素替代纯文本标签：
```
<span class="custom-tag" contenteditable="false" style="unicode-bidi: isolate; direction: ltr;">%%voucher?id=1%%</span>
```
该方案完全隔离双向算法的影响，标签显示永远正常，还能避免用户误修改标签内容，提交内容时把对应元素替换成原始标签文本即可。
方案3：调整textarea全局排版规则（仅适配原生textarea）
给textarea添加CSS属性unicode-bidi: plaintext，让浏览器自动识别每一行的文本方向，中性字符的排序会跟随所在段落的强方向字符逻辑，也能缓解这类显示问题，适合不想改造标签插入逻辑的场景。