如何自动移除jQuery表单URL字段中的http://或https://前缀？

嘿，我来帮你搞定这个问题～你的代码里有几个小细节出错了，导致没达到预期效果，咱们一步步修正：

你的原代码问题点 #

1. 错误访问字符串的value属性：你定义了var weburl = 'http://';这是一个字符串，却用了weburl.value，字符串没有value属性，这会导致替换逻辑直接失效。
2. 只处理了http://，没覆盖https://：原代码只能移除http://前缀，没法处理带SSL的https://情况。
3. 事件监听不够全面：只绑定了onchange事件，如果用户直接填写完就提交表单，可能不会触发change事件，导致前缀没被移除。

修正后的解决方案 #

咱们用正则表达式来一次性匹配http://和https://，同时绑定更可靠的事件来确保处理时机：

方案1：用jQuery实现（适配你的jQuery表单） #

$(document).ready(function() {
  // 实时监听输入，用户输入时就自动移除前缀
  $("#43").on("input", function() {
    $(this).val(function(_, oldValue) {
      // 正则匹配开头的http://或https://，忽略大小写
      return oldValue.replace(/^https?:\/\//i, "");
    });
  });

  // 表单提交前再处理一次，确保万无一失
  $("form").on("submit", function() {
    const $urlInput = $("#43");
    $urlInput.val($urlInput.val().replace(/^https?:\/\//i, ""));
    return true; // 允许表单提交
  });
});

方案2：原生JS实现（修正你的原代码逻辑） #

document.addEventListener('DOMContentLoaded', function() {
  const urlInput = document.getElementById("43");

  // 实时处理输入内容
  urlInput.addEventListener('input', removeUrlPrefix);
  // 表单提交前再处理一次
  urlInput.form.addEventListener('submit', removeUrlPrefix);

  function removeUrlPrefix() {
    // 正则替换开头的http/https前缀
    urlInput.value = urlInput.value.replace(/^https?:\/\//i, "");
  }
});

关键说明 #

• 正则表达式/^https?:\/\//i：
  • ^：确保只匹配字符串开头的前缀，不会误删内容中间的http/https
  • https?：匹配http或https（s?表示s可选）
  • :\/\/：转义冒号和斜杠，避免正则语法冲突
  • i：忽略大小写，能处理HTTP://、Https://等各种大小写组合
• 同时绑定input和submit事件：既保证用户输入时实时处理，也防止用户直接提交表单跳过change事件的情况

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