本文详解如何使用正则表达式配合 contenteditable 元素，在用户输入时实时将形如 `#fromside` 的标签包裹为 `` 标签实现加粗效果——因原生 `` 不支持 html 渲染，必须改用可编辑的富文本容器。
原生 <input> 元素仅接受纯文本，无法渲染 HTML 标签（如 <strong>），因此直接调用 .val() 设置含 HTML 的字符串不会显示加粗效果。正确方案是：改用 contenteditable="true" 的 <div> 或 <span> 作为编辑容器，并通过操作其 innerHTML 实现样式动态渲染。
以下为完整可运行示例：
<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);
});✅ 关键说明：
- 使用 input 事件（而非 keyup）更可靠，兼容粘贴、剪切、语音输入等所有输入方式；
- 正则 /#(\S+)/g 精准捕获每个 # 后的连续非空白字符（比 .+? 更安全，避免跨词匹配）；
- $1 表示捕获组内容（即 # 后的实际标签名），确保只加粗内容，不重复包含 # 符号；
- 若需区分多组标签（如 #FromSide 和 #ToSide），可扩展逻辑：提取所有匹配项后按语义分组，例如用 Array.from(html.matchAll(/#(\S+)/g)).map(m => m[1]) 获取全部标签名再分类处理。
⚠️ 注意事项：
- contenteditable 元素需手动管理焦点与表单提交（服务端接收时应解析 HTML 或提取纯文本）；
- 避免直接对 innerHTML 做无限制替换，生产环境建议添加 XSS 过滤（如仅允许 <strong> 标签）；
- 如需保留光标位置，需额外处理游标偏移（较复杂，基础场景可暂忽略）。
综上，核心原则是：输入域 ≠ 渲染域。将输入逻辑与视觉呈现解耦，才能真正实现“所见即所得”的富文本交互体验。
