填写地址的输入框如果域名带有http://和https://以及结尾带/都替换成空

admin

撰写于 2023年 05月 07 日

填写地址的输入框如果域名带有http://和https://以及结尾带/都替换成空

你可以在输入框失去焦点或提交表单时触发函数，在函数中检查输入框的值，然后应用相应的转换。以下是一个示例函数：

function cleanInput() {
  var input = document.getElementById("input-box");
  var value = input.value.trim();

  // 如果值以 http:// 或 https:// 开头，或以 / 结尾，则替换为空
  if (
    value.startsWith("http://") ||
    value.startsWith("https://") ||
    value.endsWith("/")
  ) {
    value = value.replace(/^https?:\/\/|\/$/g, "");
  }

  // 将修改后的值更新到输入框
  input.value = value;
}

这个函数首先获取输入框的值，并使用 trim() 方法删除首尾空格。然后，它使用正则表达式检查值是否以 http:// 或 https:// 开头，或者是否以 / 结尾。如果检测到这样的情况，就使用 replace() 方法将匹配到的内容替换为空。

最后，函数将修改后的值更新到输入框。你可以将此函数绑定到输入框的 onblur 或表单的 onsubmit 事件，以便在合适的时候自动进行转换。

或者用下面的JS处理

<input id="url-input" type="text" placeholder="Enter URL...">
<input  type="text" placeholder="456">
<script>
   var urlInput = document.getElementById("url-input");

urlInput.addEventListener("blur", function () {
  var url = urlInput.value.trim();

  // 如果值以 http:// 或 https:// 开头，或以 / 结尾，则替换为空
  if (
    url.startsWith("http://") ||
    url.startsWith("https://") ||
    url.endsWith("/")
  ) {
    url = url.replace(/^(https?:\/\/)|\/$/g, "");
    urlInput.value = url;
  }
});

</script>

这段代码使用 addEventListener() 方法为输入框的 blur 事件添加了一个监听器。当输入框失去焦点时，就会触发这个监听器，并执行处理 URL 的代码。

这个代码与之前的示例类似。它首先获取输入框的值并使用 trim() 方法删除首尾空格。然后，它使用正则表达式检查值是否以 http:// 或 https:// 开头，或者是否以 / 结尾。如果检测到这样的情况，就使用 replace() 方法将匹配到的内容替换为空，并将修改后的值更新到输入框。