javascript - 替换 Div 中的所有管道字符

Question

我正在使用一个相当旧的网站并使其响应。开发人员设置了如下所示的“导航”，没有列表或任何内容。移动导航将是垂直的，我不想要“|”特点。我想在不触摸导航 HTML 或添加第二个菜单以在较小的屏幕上显示的情况下执行此操作。

<div id="mainNav">
  <a href="/home">Home</a>|
  <a href="/about">About</a>|
  <a href="/areas-of-practice">Areas of Practice</a>|
  <a href="/in-the-news">In the News</a>|
  <a href="/contact">Contact</a>
</div>

我已经尝试过这行 jQuery，但它似乎删除了标签以及“|”，留下了一串“HomeAboutAreas of PracticeIn the NewsContact”。我怎样才能只删除“|”并保持其他一切不变？

$('#mainNav').text(function(index,text){
  return text.replace(/[|]/g,'');
});

Answer 1

使用 .html 而不是 .text，以便保留 HTML。

当您仅替换一个字符时，也无需在正则表达式中使用 []。但是，您需要将管道字符转义到字符集之外，因为它意味着交替。

$("#doit").click(function() {
  $('#mainNav').html(function(index, text) {
    return text.replace(/\|/g, '');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainNav">
  <a href="/home">Home</a>|
  <a href="/about">About</a>|
  <a href="/areas-of-practice">Areas of Practice</a>|
  <a href="/in-the-news">In the News</a>|
  <a href="/contact">Contact</a>
</div>
<button id="doit">Remove pipes</button>