在一个 Div 中替换所有的管道字符

Question

在一个 Div 中替换所有的管道字符

3

我正在对一个相当老的网站进行响应式设计。开发人员设置了如下所示的"nav"，没有列表或其他任何内容。移动导航将是垂直的，我不想要"|"字符。我希望在不触碰导航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代码，但它似乎同时删除了“|”和所有的“<p>”标签，导致最终字符串变成了“HomeAboutAreas of PracticeIn the NewsContact”。请问如何只删除“|”而保留其他内容？

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

- ansarob

1

使用 .text() 方法会剥离所有标签并且只返回文本内容，应该使用 .html() 方法代替。 - squill25

5个回答

3

您可以仅使用CSS来完成此操作，方法是将父元素的字体大小设置为零，并将子元素的字体大小设置为您的默认值。

#mainNav { font-size:0; }
#mainNav a { font-size:14px; }

演示

另外，如果您需要一种不替换元素（可能还绑定了事件）的javascript解决方案，则可以使用以下方法删除文本节点：

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

DEMO 2

- charlietfl

嗯...有趣。从没想过那种方法！ - ansarob

另一种沿用我第一个CSS想法的方法是将颜色设置为与背景相匹配。 - charlietfl

2

将“管道”字符放在单独的<span>元素中，然后使用CSS媒体查询隐藏它。 HTML：

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

CSS

@media (max-width: 320px) {
  .mainNav a span {
    display: none;
  }
}

或者，您可以给您的a元素添加border-right:1px solid black，然后使用媒体查询将其恢复为0px; - 这完全放弃了|字符，并使用纯CSS实现您想要的结果。

#mainNav a{
  padding:2px;
  border-right:1px solid black;
}



@media (max-width: 600px) {
  #mainNav a{
    border-right:0px solid black;
  }
}

<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>

- nicholaswmin

这是我采用的方法。它真的很简单，但我的思维只想到了JS。但是，由于我要求的是JS解决方案，所以我不能选择它作为正确答案。不过我投了赞成票，谢谢！ - ansarob

0

演示：https://jsfiddle.net/erkaner/6mtafkek/1/ 您可以仅检索链接并将其附加回div：

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

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


 a{
     margin-right:5px;
 }

- renakre

有趣，但似乎是一种奇怪的做法。谢谢！ - ansarob

0

试试这个：

$('#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>

- vsogrimen

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Barmar · Accepted Answer

使用.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>