如何为被CMS清理移除所有HTML标签的文本添加CSS样式？

你的思路完全正确，这是仅控制客户端场景下规避服务端HTML过滤的成熟方案。

核心逻辑 #

因为CMS的HTML清理只会移除标准HTML标签，你完全可以自定义一套不会被识别为HTML的标记语法（类BBCode是最常见的选择），等内容在客户端渲染完成后，用JS把自定义标记替换成你需要的带样式的HTML元素即可。

基础实现（无需第三方库） #

如果你的样式需求比较简单（只有加粗、变色、自定义标题等级这类需求），完全可以自己手写实现：

1. 先约定好标记和样式的映射规则，比如：
   • [h2]xxx[/h2] 对应 <h2 class="custom-title">xxx</h2>
   • [b]xxx[/b] 对应 <strong class="custom-bold">xxx</strong>
   • [red]xxx[/red] 对应 <span class="text-red">xxx</span>
2. 页面加载完成后，选中CMS输出内容对应的DOM容器，拿到其文本内容
3. 用正则匹配对应的标记做替换，示例代码参考：

const contentContainer = document.querySelector('.cms-output-container');
let content = contentContainer.textContent;
// 替换h2标记
content = content.replace(/\[h2\](.*?)\[\/h2\]/g, '<h2 class="custom-title">$1</h2>');
// 替换加粗标记
content = content.replace(/\[b\](.*?)\[\/b\]/g, '<strong class="custom-bold">$1</strong>');
// 替换红色文本标记
content = content.replace(/\[red\](.*?)\[\/red\]/g, '<span class="text-red">$1</span>');
// 写回DOM
contentContainer.innerHTML = content;

4. 提前在你的CSS文件里写好对应类的样式即可。

复杂场景推荐方案 #

如果需要支持嵌套标记、列表、链接、图片这类复杂功能，不需要自己造轮子，直接用成熟的客户端BBCode解析库即可，常见的轻量库都可以满足需求，只需要配置好你自定义的标记和HTML的映射规则就能直接使用。

注意事项 #

• 要注意XSS安全风险，如果你允许用户输入链接、图片这类内容，替换的时候要做好格式校验，比如限制链接的域名白名单，避免恶意内容插入。
• 如果CMS的内容是异步渲染的，要把替换逻辑放在内容插入DOM之后执行，避免匹配不到标记。

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