js拼接url以及為html某標簽屬性賦值

記錄

js拼接url

比如有些時候我們需要為某按鈕實現跳轉，可以利用下面的方式做到：

function ReturnIndex() {
    var rex = RegExp("tools")
    var url = window.location.origin
    var new_url = "http://127.0.0.1:"+window.location.port
    if (url.match(rex)) {
        curr_url = window.location.origin   // 獲取根網址：比如：https://www.baidu.com
        a = curr_url.split(".")[0]
        now = a.split("//")[1]
        window.location.href = curr_url.replace(now, "www")
    } else {
        console.log(new_url)
        window.location.href = new_url
    }
};
$("#ReturnBtn").on('click', function () {
    ReturnIndex()
});

• 說明：

  • 獲取URL全部信息：window.location

    • 擁有的方法和屬性，我這里以博客園為例，按F12，在console下調試：

      ancestorOrigins: DOMStringList {length: 0}
      assign: ƒ assign()
      hash: ""
      host: "i-beta.cnblogs.com"
      hostname: "i-beta.cnblogs.com"
      href: "https://i-beta.cnblogs.com/posts/edit"
      origin: "https://i-beta.cnblogs.com"
      pathname: "/posts/edit"
      port: ""
      protocol: "https:"
      reload: ƒ reload()
      replace: ƒ ()
      search: ""
      toString: ƒ toString()
      valueOf: ƒ valueOf()
      Symbol(Symbol.toPrimitive): undefined
      __proto__: Location
      

    • 從上面看到，這里我使用的主要是origin、port、href這仨屬性，分別對應請求源、端口、超鏈接URL。

  • url拼接，因為我這里是從二級域名往一級域名跳轉，所以使用了字符串的替換：

    • 先定義包含tools的正則：var rex = RegExp("tools")
    • 然后做了一個判斷語句【這里是因為方便本地和遠程服務調試使用】，如果當前url包含二級域名tools，則替換為一級域名www，然后按鈕跳轉回一級域名資源下；若無，則代表是本地環境，跳轉到ip+port頁面下。

給指定標簽屬性賦值

使用選擇器+attr方法來賦值。attr(attributeName: string, value: string | number)

$(".qrcode_modal").attr('src', new_url) // 給src賦值

如上則是給class為qrcode_modal的標簽src屬性賦值new_url。