本文详解如何使用正则表达式配合 contenteditable 元素，在用户输入时实时将形如 `#fromside` 的标签包裹为 `` 标签实现加粗效果——因原生 `` 不支持 html 渲染，必须改用可编辑的富文本容器。
原生 元素仅接受纯文本，无法渲染 HTML 标签（如 ），因此直接调用 .val() 设置含 HTML 的字符串不会显示加粗效果。正确方案是：改用 contenteditable="true" 的 以下为完整可运行示例： ✅ 关键说明： 传媒企业网站系统使用热腾CMS(RTCMS),根据网站板块定制的栏目，如果修改栏目，需要修改模板相应的标签。站点内容均可在后台网站基本设置中添加。全站可生成HTML，安装默认动态浏览。并可以独立设置SEO标题、关键字、描述信息。源码包中带有少量测试数据，安装时可选择演示安装或全新安装。如果全新安装，后台内容充实后，首页才能完全显示出来。（全新安装后可以删除演示数据用到的图片，目录在https:// ⚠️ 注意事项： 综上，核心原则是：输入域 ≠ 渲染域。将输入逻辑与视觉呈现解耦，才能真正实现“所见即所得”的富文本交互体验。<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 使用 contenteditable 替代 input -->
<div id="custm-field"
contenteditable="true"
style="border: 1px solid #ccc; padding: 8px; min-height: 24px;">
</div>$('#custm-field').on('input', function() {
let html = $(this).html();
// 匹配 #后跟非空格字符（支持中文、字母、数字、下划线等），直到遇到空格或结尾
let updatedHtml = html.replace(/#(\S+)/g, '<strong>$1</strong>');
// 防止重复嵌套：若已存在 <strong>，先移除再重写（可选增强）
$(this).html(updatedHtml);
});
