如何在字符串指定位置添加HTML标记？替换下划线问题求助

看起来你已经完成了替换逻辑，但现在的问题是替换后的span盒子和前后文本紧紧连在一起，既不美观也不符合预期对吧？我来给你两个简单的解决思路：

方案1：替换时主动添加空格 #

如果你的原字符串里下划线_前后没有空格，那替换的时候可以直接在span的前后加上空格，这样文本和盒子之间就会有自然的间距。比如用JavaScript实现的话：

// 原字符串
const originalText = "This is a string_right here";
// 替换时给span前后加空格
const updatedText = originalText.replace(/_/g, ' <span class="smallBox"></span> ');
// 现在输出就是：This is a string <span class="smallBox"></span> right here

方案2：用CSS给盒子添加间距（更优雅） #

如果不想修改字符串结构，也可以通过CSS给smallBox类设置边距，同时别忘了给盒子设置宽高——空的行内span默认是看不到的哦！示例样式：

.smallBox {
  /* 转为行内块元素，才能设置宽高和边距 */
  display: inline-block;
  /* 左右各留4px间距，可按需调整 */
  margin: 0 4px;
  /* 给盒子设置大小，方便看到效果 */
  width: 16px;
  height: 16px;
  /* 可选：加个边框让盒子可见 */
  border: 1px solid #333;
}

这样不管替换后的span有没有空格，CSS都会自动给它和前后文本拉开距离，而且样式和结构分离，后期调整也更方便。

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