我来帮你搞定这两个头疼的问题，咱们一步步修正：

问题根源拆解 #

• 空格间隙问题：你原来用before("s")是在<b>标签前插入字符，但原文本里comment后面本来就带空格，导致插入的s跟单词之间隔了空格，变成comment s <b>的尴尬格式。
• 重复追加问题：每次点击按钮都会查找不包含comments的.comments_box，但第一次插入s后文本变成comment s <b>，并不包含完整的comments字符串，所以每次点击都会继续加s，导致一串多余的s。

修正后的完整代码 #

咱们换个思路，直接精准匹配并替换单数单词，同时确保只处理一次：

JavaScript 代码 #

$(document).on("click", "button", function() {
  // 遍历所有评论容器
  $(".comments_box").each(function() {
    const $box = $(this);
    // 只提取纯文本节点，避开<b>标签
    const textNode = $box.contents().filter(function() {
      return this.nodeType === 3;
    }).first();
    
    const currentText = textNode.text().trim();
    // 只处理恰好是单数"comment"的情况
    if (currentText === "comment") {
      // 直接替换成复数，保留原有的空格格式
      textNode.replaceWith("comments ");
    }
  });
});

HTML 部分（保持原结构不变） #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class='comments_box'>comment <b></b> </div>
<hr/>
<div class='comments_box'>comments <b></b> </div>
<hr/>
<button>Append an "S"</button>

为什么这样改能解决问题？ #

• 消除空格间隙：直接替换文本节点里的comment为comments （带空格），让s直接跟单词连在一起，完全贴合原格式，不会出现多余间隙。
• 阻止重复追加：只匹配文本内容恰好是comment的容器，替换成复数后，下次点击就不会再匹配到它，自然不会重复添加s。

如果你偏好更灵活的正则写法，也可以用下面这段代码，能兼容文本前后的空格差异：

$(document).on("click", "button", function() {
  $(".comments_box").each(function() {
    const $box = $(this);
    const textNode = $box.contents().filter(function() {
      return this.nodeType === 3;
    }).first();
    const currentText = textNode.text();
    // 用正则精准匹配单数形式，只替换一次
    textNode.replaceWith(currentText.replace(/\bcomment\b/, "comments"));
  });
});

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