jQuery替换字符串中字符的方法

Question

I have a generated navigation, The first n items have _ in front of them to always be at the top of list. What I want to accomplish now is to remove that _ from the front-end of the site.

I tried to do this with the jQuery code below which almost worked but it is also changing the text of other nav items.

See full mark-up on JS Fiddle: https://jsfiddle.net/1fz661o4/

Code:

$(function() {
  $('.dropdown-submenu').html($('.dropdown-submenu').html().replace(/\_/g,''));
});

Answer 1

You could just change it to loop over the anchors.

$(function() {
    $('.dropdown-submenu > a').each(function() {
        $(this).text($(this).text().replace(/\_/g, ''));
    });
});

https://jsfiddle.net/utk12jdt/1/

Answer 2

So basically you want to remove only the underscores in anchors that are direct children of .dropdown-submenu ? In your fiddle, replace $('.dropdown-submenu') with $('.dropdown-submenu > a') .

JSFiddle: https://jsfiddle.net/26qLofz8/

$(function() {
      $('.dropdown-submenu > a').html($('.dropdown-submenu > a').html().replace(/\_/g,''));
});

Edit:

after your response, the question now is clear. To prevent your <li> 's from all becoming Software one, you will need to loop over all the elements you want to replace, like so:

$(function() {
  $('.dropdown-submenu > a').each(function(i, el) {
      $(el).html($(el).html().replace(/\_/g,''));
  });
});

JSFiddle: https://jsfiddle.net/n7ms67k0/

Answer 3

You can use the .html() overload with a function that provides the existing html:

$('.dropdown-submenu').html(function(index, html) { return html.replace(/\_/g,''); });

Updated fiddle: https://jsfiddle.net/1fz661o4/2/

---

Alternatively, you can loop over each record:

$('.dropdown-submenu').each(function() {
   $(this).html($(this).html().replace(/\_/g,''));
});

Answer 4

Simply replacing the HTML will remove any event listeners and might also cause issues in the future if you have links with underscores in the URL etc.

What you should do, is go through the elements and change the value of the text nodes. I'm not sure how to do it reliably in jQuery, but here is how you would do it with plain JavaScript DOM.

function replaceUnderscore(index, el) {
  switch (el.nodeType) {
    case 3: // text node
    el.nodeValue = el.nodeValue.replace(/_/g, '');
    break;

    case 1: // normal element
    for (var i = 0, child; child = el.childNodes[i]; i++) {
      replaceUnderscore(i, child);
    }
    break;
  }
}

To apply this to elements you found in jQuery, you just do

$('.class').each(replaceUnderscore);

Not tested but I think this should work.

That being said, do you have to do this in JavaScript? Ideally this kind should be performed on the server side instead. If it's a CMS you might be able to write a little plugin for this purpose.

Answer 5

You need to make your selector more specific. Either give it a unique class or an ID and select based on that.

<ul class="dropdown-submenu my-custom-menu">

And the jQuery would change to:

$(function() {
  var menu = $('.my-custom-menu'); // save the query since we use it twice
  menu.html(menu.html().replace(/\_/g,''));
});

NOTE: You're using id s incorrectly since they're meant to be globally unique. You shouldn't have id="row" multiple times. That's what classes are for.

Answer 6

You must go through each element with the .dropdown-submenu class using the jQuery each function so you will only affect one element at a time. Your JavaScript code would look like this.

$(".dropdown-submenu").each(function() {
    //this is the current .dropdown-submenu element
    $(this).html($(this).html().replace(/\_/g,''));
});