如何在 URL 路径的开头插入文本/路径 [重复]

Question

我正在尝试想办法在使用 jQuery 的 URL 的第一个反斜杠之后添加某个单词（在本例中为城市名称）。

原因是我创建了一个函数，当用户点击谷歌地图上的某个位置时，会使用某些城市信息创建一个 cookie。然后我使用 jQuery 从该 cookie 中获取该城市信息。

以下是我希望它如何运行的示例。

（即：https://linktowebsite.com/services/bumpers 在链接中添加“橙色”一词 -> https://linktowebsite.com/orange/services/bumpers）

这就是我目前将城市名称添加到 URL 的方式。我意识到这只会将城市名称添加到 URL 的末尾，而不是在 .com 之后的第一个反斜杠之后

jQuery('#menu-main-menu .menu-item a').each(function() {
  var nLink = jQuery(this);
  var locLink = Cookies.get('location');
   var _href = nLink.attr("href"); 
  nLink.attr("href", _href + locLink);
}); 

这是整个sn-p！

jQuery( document ).ready(function() {
    
    jQuery('.btnlocation').append('it worked');
    
    var CookieSet = Cookies.get('location');
    
    if (CookieSet == null){
 //no cookie
  console.log( 'No Cookies');
 return false;
} else {
 //have cookie
 var ThisLocation = Cookies.get('location');
   jQuery('#results').html('Welcome to Bumper Buddies ' + ThisLocation);
    
    jQuery('#menu-main-menu .menu-item a').each(function() {
  var nLink = jQuery(this);
  var locLink = Cookies.get('location');
   var _href = nLink.attr("href"); 
  nLink.attr("href", _href + locLink);
});
}



});

任何帮助将不胜感激！

Answer 1

一些使用数组的字符串操作应该可以解决问题。

根据您的示例，“linktowebsite.com/services/bumpers”是原始链接，我们从 cookie 中获取“橙色”。这是代码。我添加了三行：

jQuery('#menu-main-menu .menu-item a').each(function() {
  var nLink = jQuery(this);
  var locLink = Cookies.get('location');
  var _href = nLink.attr("href")

  var hrefArray = _href.split("/")   // 1
  hrefArray.splice(1, 0, locLink)    // 2
  
  var newHref = hrefArray.join("/")  // 3

  nLink.attr("href", newHref);
});

我为每一行添加了编号。让我们来看看它们。

1. 在这里，我们使用split 方法使用_href 中的正斜杠将_href 字符串分隔为一个数组。 hrefArray 现在等于： ["linktowebsite.com", "services", "bumpers"]
2. splice 是一种方便的方法。您可以在 MDN 文档中read more about it。在这种情况下，我使用它将locLink 插入到数组中的索引 1 中。 现在，hrefArray 应该是这样的：["linktowebsite.com", "orange", "services", "bumpers"]
3. 最后，我们使用join 方法将数组的所有元素连接成一个字符串，每个元素由我们选择的分隔符分隔。在这种情况下，我们可以只使用“/”，这样数组的每个元素都像这样连接："linktowebsite.com/orange/services/bumpers"

Answer 2

这对于使用数组的普通 JS 是可行的。

您需要将href 字符串与split... 分开（创建一个数组）

然后创建一个新数组：

1. 第一个使用shift的“拆分href”项
2. 来自 cookie 的城市名称
3. “拆分的 href”项的其余部分

然后使用join将它全部连接回一个字符串

---

编辑

我为你创建了一个函数，它考虑了协议（http:// 或 https://），如果存在的话。

function insertCity(href, cookieValue){
  let protocol_match = href.match(/http(s)?:\/\//)
  let protocol = protocol_match ? protocol_match[0] : ""
  let href_splitted = href.replace(protocol,"").split("/")
  return protocol + [href_splitted.shift(), cookieValue, ...href_splitted].join("/")
}

// HTTP
let href1 = "http://linktowebsite.com/services/bumpers"

// HTTPS
let href2 = "https://linktowebsite.com/services/bumpers"

// No protocol?
let href3 = "linktowebsite.com/services/bumpers"

// Some cookie value
let cookie = "orange"

// Testing the function
console.log(insertCity(href1, cookie))
console.log(insertCity(href2, cookie))
console.log(insertCity(href3, cookie))

---

那将是您的用例：

jQuery(document).ready(function () {
  jQuery(".btnlocation").append("it worked");

  var ThisLocation = Cookies.get("location");

  if (ThisLocation == null) {
    //no cookie
    console.log("No Cookies");
    return false;
  } else {
    //have cookie
    jQuery("#results").html("Welcome to Bumper Buddies " + ThisLocation);

    jQuery("#menu-main-menu .menu-item a").each(function () {
      var nLink = jQuery(this);
      nLink.attr("href", insertCity(nLink.attr("href"), ThisLocation));
    });
  }
});