为什么url在HTML中通过input字段时会被转换成sub-url？

Question

我将 URL 作为 HTML 形式的用户输入，并使用 javascript 创建动态 link。当我将输入作为 "https://www.google.com" 但是当我将输入作为 "[=39] 传递时，代码工作正常=]" 它正在将 link 转换为 localhost path 例如 file:///path_where_html_exists/urlpassed 这是我的代码

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form>
      <input id="inputurl" type="url" />
      <button type="submit" onclick="handleSubmit()">sunmit</button>
      <script src="newscript.js"></script>
    </form>

    <div id="newpara"></div>
  </body>
</html>

JS

function handleSubmit() {
  event.preventDefault()
  var elem = document.getElementById('inputurl').value
  console.log(elem)
  ele = document.getElementById('newpara')
  ele.innerHTML += `<a href="${elem}">link here</a>`
}

谢谢

Answer 1

如果您将文本放入 link 的“href”属性中，并且该文本的开头没有协议（http 或 https 或类似协议），浏览器将附加它到当前页面的末尾 url.

您可以在此 JSFiddle 中看到实际效果。由于您是通过在浏览器中打开文件在您的电脑上对其进行测试，因此您会看到您提到的 url。

要修复它，只需检查文本是否有协议，并在必要时插入。一个非常基本的实现可能如下所示：

if (!elem.startsWith("http")) {
  elem = "//" + elem;
}

本文 fiddle 将向您展示操作方法。

这里也是使用正则表达式更好的实现：

let reg = /^http(s)?:\/\//g;
if (!elem.match(reg)) {
  elem = "//" + elem;
}

Answer 2

尝试在输入 url 似乎有效之前添加“http://”或“https://”

function handleSubmit() {
  event.preventDefault()
  var elem = document.getElementById('inputurl').value
  console.log(elem)
  ele = document.getElementById('newpara')
  ele.innerHTML += `<a href="http://${elem}">link here</a>`
}

为什么url在HTML中通过input字段时会被转换成sub-url？

Why url is converted into sub-url in HTML when passing through input field?

html

javascript

forms

anchor