jQuery替换字符串字符的方法

jQuery way to Replace character from a string

本文关键字:方法 字符 字符串 替换 jQuery      更新时间:2023-09-26

我有一个生成的导航,前n个项目有_在他们前面,总是在列表的顶部。我现在要做的是把_从网站前端移除。

我试着用下面的jQuery代码这样做,几乎工作,但它也改变了其他导航项的文本。

查看JS Fiddle的完整标记:https://jsfiddle.net/1fz661o4/

代码:

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

您可以将其更改为在锚点上循环。

$(function() {
    $('.dropdown-submenu > a').each(function() {
        $(this).text($(this).text().replace(/'_/g, ''));
    });
});
https://jsfiddle.net/utk12jdt/1/

所以基本上你想只删除锚的下划线是.dropdown-submenu的直接子?在您的小提琴中,将$('.dropdown-submenu')替换为$('.dropdown-submenu > a')

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

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

经过你的回答,现在问题很清楚了。为了防止你的<li>变成软件,你需要循环所有你想要替换的元素,像这样:
$(function() {
  $('.dropdown-submenu > a').each(function(i, el) {
      $(el).html($(el).html().replace(/'_/g,''));
  });
});

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

您可以将.html()重载与提供现有html:

的函数一起使用。
$('.dropdown-submenu').html(function(index, html) { return html.replace(/'_/g,''); });

更新小提琴:https://jsfiddle.net/1fz661o4/2/


或者,您可以遍历每个记录:

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

简单地替换HTML将删除任何事件侦听器,并且如果将来在URL中有带下划线的链接等,也可能导致问题。

您应该做的是遍历元素并更改文本节点的值。我不确定如何在jQuery中可靠地做到这一点,但下面是使用普通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;
  }
}

要将此应用于jQuery中的元素,只需执行

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

没有测试,但我认为这应该有效。

也就是说,你必须在JavaScript中做这个吗?理想情况下,这种操作应该在服务器端执行。如果它是一个CMS,你可以为此目的编写一个小插件。

你需要让你的选择器更具体。要么给它一个唯一的类,要么给它一个ID,然后根据它进行选择。

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

jQuery会变成:

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

注意:您使用id s不正确,因为它们是全局唯一的。你不应该多次使用id="row"。这就是类的作用

您必须使用jQuery each函数使用.dropdown-submenu类遍历每个元素,这样您一次只能影响一个元素。你的JavaScript代码看起来像这样:

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