javascript - 通过弹出窗口更改 url

Question

我在每个元素中都有带有数据属性的弹出框

这里是片段

$("[data-toggle=popover]").popover({
  html: true,
  content: function() {
    var content = $(this).attr("data-popover-content");
    return $(content).children(".popover-body").html();
  },
  title: function() {
    var title = $(this).attr("data-popover-content");
    return $(title).children(".popover-heading").html();
  }
});

$('.mainnav').on('click', '.popover-content a', function() { // change this
  let lang = $(this).data("lang")
  console.log(lang);
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="mainnav">
  <ul class="topnav">
    <a href="#" data-toggle="popover" data-popover-content="#a1">Popover</a>
  </ul>
</nav>
<div id="a1" class="hidden">
  <div class="popover-heading">_('Välj ditt språk')</div>
  <div class="popover-body">
    <div>
      <a href="#" data-lang="no">Norsk</a>
    </div>
    <div>
      <a href="#" data-lang="de">Deutsch</a>
    </div>
    <div>
      <a href="#" data-lang="nl">Nederlands</a>
    </div>
    <div>
      <a href="#" data-lang="es">Español</a>
    </div>
    <div>
      <a href="#" data-lang="dk">Dansk</a>
    </div>
  </div>
</div>

我需要获取 data-lang 属性并更改网站的域。例如，它是 http://local.test.dk:3000/#如果我选择 Norsk，我需要重定向到 http://local.test.no:3000/#

获取数据属性已完成，如何正确更改链接？

谢谢你的帮助。

Answer 1

这可能不是一个很好的正则表达式，但它可以解决问题:

// test regex
var langCode = 'no';
var curUrl = window.location.href;
var newUrl = curUrl.replace(/(http:\/\/local.test.)dk(:3000\/#)/, '$1'+langCode+'$2');
window.location.replace(newUrl);

这是一个 fiddle ，所以你可以看到它的工作原理。显然你不能在那里使用 url。

https://jsfiddle.net/49whrtg3/6/