HTML span标签触发评论提交原理？Squarespace评论开发困惑

我在给Squarespace托管的网站修改评论机制，目的是过滤带垃圾URL的评论。Squarespace不提供技术支持，只给了可嵌入的HTML文件和它调用的超大体积JavaScript库。

我已经改了嵌入的HTML，加了新的「Post」按钮和一段JS代码，用来检查评论文本框里的禁用词汇（之后会换成垃圾URL列表）。这个按钮和JS功能正常，能识别违规评论，但搞不懂原HTML里带comment-btn类的span标签是怎么调用JS库提交评论的。要是能搞懂原理，就能在自己的if语句里调用这个库来提交审核通过的评论，求解答。

现有代码 #

<!DOCTYPE html>
<html>
<body>
<div class="new-comment-area top-level-comment-area edit-mode">
  <div class="input">
    <form action="https://www.manhattancontrarian.com/blog/2023-2-4-in-new-york-a-very-slow-political-awakening#" method="post" class="comment-form">
      <textarea class="comment-input" id="comment" name="comment" data-defaulttext="Leave a comment here." data-edited="false" rows="10" cols="80"></textarea>
    </form>
  </div>
  <div class="comment-btn-wrapper">
    <span class="btn-text preview-comment top-level-preview-btn">Preview</span>
    <span class="comment-btn sqs-system-button sqs-editable-button-font sqs-editable-button-shape sqs-button-element--primary">Post Comment...</span>    
  </div>
  <button onclick="CheckComment()">Post</button>
</div>
<script type="text/javascript">
var verbotenList = ["forbidden1", "forbidden2"];
function CheckComment() {
  var commentText = document.getElementById("comment").value;
  alert(commentText);
  var verbotenFound = 0;
  for (var i = 0; i < verbotenList.length; i++) {
    if (commentText.search(verbotenList[i]) >= 0) {
      verbotenFound++;
    }
  }
  alert("verbotenFound=" + verbotenFound);
  if (verbotenFound == 0) {
    alert("comment approved");
  } else {
    alert("comment not approved");
  }
}
</script>
</body>
</html>

原理分析与解决方案 #

原生提交逻辑的本质 #

Squarespace的.comment-btn是一个span标签，它的提交功能是通过JavaScript事件绑定实现的——官方库会给这个元素添加点击事件监听，触发内部的评论提交流程（包括表单验证、接口请求等）。你不需要去拆解百万行的库代码，直接模拟点击这个元素就能复用原有逻辑。

修改你的CheckComment函数 #

在审核通过的分支里，添加一行代码触发原生按钮的点击：

function CheckComment() {
  var commentText = document.getElementById("comment").value;
  var verbotenFound = 0;
  // 替换为垃圾URL的正则检测，更精准匹配链接
  var urlRegex = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/g;
  verbotenFound = commentText.match(urlRegex) ? commentText.match(urlRegex).length : 0;

  if (verbotenFound == 0) {
    // 触发原生提交按钮的点击事件，复用官方提交逻辑
    document.querySelector('.comment-btn').click();
  } else {
    alert("评论包含违规链接，无法提交");
  }
}

额外优化 #

• 隐藏原生的「Post Comment...」按钮，让用户只看到自定义按钮：

  .comment-btn { display: none; }
  

• 给自定义按钮添加和原生按钮一致的类名，保持界面样式统一：

  <button onclick="CheckComment()" class="comment-btn sqs-system-button sqs-editable-button-font sqs-editable-button-shape sqs-button-element--primary">Post</button>
  

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