博客应用用户输入中<br>换行标签替换为自定义内容的实现咨询

解决方案 #

该需求完全可以实现，核心是用全局正则匹配所有格式的<br>实体编码，替换后即可满足要求。

核心逻辑说明 #

你当前代码的问题在于replace用字符串匹配只会替换第一个符合条件的内容，且无法兼容带空格、带闭合符的各种br实体写法，替换为带全局标识的正则即可解决。
匹配所有格式br实体的正则为：/<\s*br\s*\/?\s*>/gi

• g标识代表全局匹配所有符合条件的内容，不是只匹配第一个
• i标识代表不区分大小写，兼容<BR>这类写法
• \s*匹配任意数量的空格，兼容< br >、<br/>、<br />等各类常见写法

具体实现方案 #

方案1：替换为换行符用于逐行处理

如果你需要逐行处理内容，直接把br实体替换为换行符\n即可：

const txt = "hello<br>etc...";
// 替换所有br实体为换行符
const processedTxt = txt.replace(/<\s*br\s*\/?\s*>/gi, '\n');
// 逐行拆分
const myVar = processedTxt.split('\n');
// 输出结果：['hello', 'etc...']，完全无br相关内容

处理完内容后如果要在HTML页面正常显示换行，只要给内容容器加CSS属性white-space: pre-line，文本会自动识别\n换行，不会显示多余字符。

方案2：直接替换为自定义内容

如果你要把br实体替换为你指定的替代内容，直接修改replace的第二个参数即可：

const test = txt.replace(/<\s*br\s*\/?\s*>/gi, 'anAlternative');
// 输出结果："helloanAlternativeetc..."

注意事项 #

如果后续需要把用户输入的内容渲染到HTML页面，建议做好内容过滤，避免XSS安全风险。

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