Javascript 替换Div中的所有管道字符

我采取了一个相当老的网站，使其响应。开发人员设置“导航”，如下所示，没有列表或任何内容。移动导航将是垂直的，我不想要“|”字符。我想这样做，而不触摸导航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>

---

将“管道”字符放在单独的

元素集中，然后使用隐藏

HTML:

<a href="/areas-of-practice">Areas of Practice <span>|</span></a>

---

或您只需给

元素添加一个右边框：1px纯黑色

，然后将其还原为

0px使用媒体查询-这完全抛弃了|字符，并使用普通CSS来实现预期结果


#主导航a{
填充：2px；
右边框：1px纯黑；
}
@介质（最大宽度：600px）{
#主导航a{
右边框：0px纯黑；
}
}

联系使用
.html
而不是
.text
，这样您就可以保留html了

当您仅替换一个字符时，也不需要在regexp中使用
[]
。但是，您需要在字符集之外转义管道字符，因为它意味着交替


$（“#doit”）。单击（函数（）{
$（'#mainNav'）.html（函数（索引，文本）{
返回文本。替换（/\\\；/g'，）；
});
});

|
|
|
|
移除管道
演示：

您只能检索链接并将其追加回div：

 var links = $('#mainNav a');

 $('#mainNav').html('').append(links );


 a{
     margin-right:5px;
 }

试试这个：


$（'#mainNav'）.html（函数（索引，文本）{
返回文本。替换（/[|]/g'，）；
});

|
|
|
|
只需将父字体大小设置为零，并将子字体大小设置为您的默认值，就可以使用css实现这一点

#mainNav{font size:0；}
#mainNav a{字体大小：14px；}


对于不替换元素（可能还有绑定到元素的事件）的javascript解决方案，您可以使用以下方法删除文本节点：

$('#mainNav').contents().filter(function(){
    return this.nodeType === 3;
}).remove(); 

使用
.text（）
去除所有标记并仅返回文本，改用
.html（）
。好的，这很有意义！现在，@Nicholas Kyriakides在下面提出了一个有趣的想法。假设我可以触摸HTML。我是使用上面的JS方法还是添加元素并用CSS隐藏它们。我个人喜欢JS版本，因为我讨厌添加这样的HTML钩子。我不是说你不应该使用JS，但我个人会尽可能多地将与布局/设计/演示相关的所有内容保留在HTML/CSS中-你无论如何都会使用媒体查询。当我读到你的评论时，我倾向于另一个方向。就像我说的，我不喜欢像那样在HTML中添加元素，但有时候这是最好的方法。嗯，我会抛弃整个管道字符的东西-只给
a
元素一个
右下角：1px
，然后在手机上使用媒体查询将其变成
0px
。@NicholasKyriakides到底是什么意思？很有趣，但这似乎是一种奇怪的方式。谢谢这就是我采用的方法。这真的很简单，但我的脑子里只想着JS。但是，我不能选择这个作为正确答案，因为我要求的是JS解决方案。不过我还是投了赞成票，谢谢！嗯……很有趣。从来没有想过那种方法！与我的第一个css想法类似的另一种方法是设置颜色以匹配背景
 var links = $('#mainNav a');

 $('#mainNav').html('').append(links );


 a{
     margin-right:5px;
 }

$('#mainNav').contents().filter(function(){
    return this.nodeType === 3;
}).remove();