I am taking a fairly old site and making it responsive. The developer setup the "nav" like below, no list or anything. The mobile nav will be vertical and I don't want the "|" character. I want to do this without touching the nav HTML or adding a second menu to show on smaller screens.

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

I've tried this line of jQuery, but it seems to remove the tags as well as the "|", leaving a string of "HomeAboutAreas of PracticeIn the NewsContact". How would I only remove the "|" and leave everything else as is?

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

I am taking a fairly old site and making it responsive. The developer setup the "nav" like below, no list or anything. The mobile nav will be vertical and I don't want the "|" character. I want to do this without touching the nav HTML or adding a second menu to show on smaller screens.

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

I've tried this line of jQuery, but it seems to remove the tags as well as the "|", leaving a string of "HomeAboutAreas of PracticeIn the NewsContact". How would I only remove the "|" and leave everything else as is?

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

• javascript
• jquery
• regex

Share Follow asked Apr 24, 2015 at 0:35 ansarobansarob 82522 gold badges1313 silver badges3232 bronze badges 1

• 1 Using .text() strips all of the tags and returns only the text, use .html() instead. – squill25 Commented Apr 24, 2015 at 0:39

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

Use .html instead of .text so you keep the HTML.

There's also no need to use [] in the regexp when you're just replacing one character. However, you need to escape the pipe character outside a character set, since it means alternation.

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

<script src="https://ajax.googleapis./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>

Can do this with css alone by setting parent font-size to zero and setting the children font size to whatever your default is

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

DEMO

And for a javascript solution that doesn't replace the elements ( and possibly events bound to them) you can remove the text nodes using:

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

DEMO 2

Put the 'pipe' characters in a separate <span> elemenet which you then hide using CSS media queries

HTML:

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

CSS

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

---

Or you can just give a border-right:1px solid black to your a elements which you will then revert to 0px; using media queries - This pletely ditches the | characters and uses plain CSS to achieve your intended result

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

Demo: https://jsfiddle/erkaner/6mtafkek/1/

You can retrieve only the links and append them back to the div:

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

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


 a{
     margin-right:5px;
 }

Try this:

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

<script src="https://ajax.googleapis./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>