使用Jquery编辑类

因为这听起来很怪异我有一个完整的url作为我的一些html元素的类。 显然这不适用于css puposes。 我想要做的是删除除了页面slug之外的所有东西。 这是我目前的一个例子。

some code 

就HTML而言，我最终想要的是：

 
some code 

我当时正在考虑使用.replace方法替换“ http://example.com/ ”，但我无法删除尾部斜杠和url的开头。 这是我的想法。

 var strclass = $(li[class*=http://example.com/]).attr('class').match(/\bhttp://example.com/.+?\b/); var newclass = strclass.replace("http://example.com/", "").replace("/", "") 

任何帮助表示赞赏。 如果我使用上面的代码进入完全错误的方向，请提供您认为我应该查看的位置的链接。

******我正在尝试新的东西，并寻求更多的反馈！******

这是我通过结合你的一些很棒的想法编写的新代码。

 if(li.hasClass('menu-item')) { var strclass = $('li.menu-item').attr('class'); var newclass = strclass.split(" ")[1].split("/")[3]; $(".menu-item").removeClass("http://example.com/" + strclass + "/").addClass(newclass); } 

我现在遇到的问题是if语句中的第三行，我用完整的url删除旧类，并添加只有页面slug的新类。 如果有人知道如何做这项工作或其他会做同样的事情，请告诉我。 谢谢大家的辛勤工作和及时回复！

Answer 1

这正是你正在尝试的：

 var items = document.querySelectorAll("li.menu-item"); alert(items.length + " items with classes that need to be changed found."); for(var i = 0 ; i < items.length; ++i){ var classes = items[i].className.split(" "); items[i].className = classes[0] + " " + classes[1].split("/")[3]; alert("New class attribute value is: " + items[i].className); } 

 .menu-item { font-family:Arial; font-size:1.5em; } .page-link { background-color: red; } .something {background-color: green;} .go-somewhere {background-color: yellow; } 

 
some code
 
some code
 
some code
 
some code 

Answer 2

 var strclass = "menu-item http://example.com/page-link/"; var newclass = strclass.replace("http\:\/\/.+\/(.+)\/", "$1"); 

现在我不知道这是否可以解决你所有的问题，但听起来你只是太具体了。 只需创建一个更通用的表达式，并替换类字符串的那一部分。

如果你想要一些不那么贪心的东西，只能获得最后一个文件夹

 var newclass = strclass.replace("http\:\/\/.+\/([^\/]+)\/", "$1"); 

Answer 3

您可以使用斜杠构建数组：

 url = url.split("/"); 

然后获取slug，它将是数组中的最后一个元素或最后一个元素，具体取决于是否存在尾随/不存在。

 if (url[url.length - 1]) { slug = url[url.length - 1]; } else { slug = url[url.length - 2]; } 

Answer 4

我可能会使用这个正则表达式替换： /.*?([^/]+)\/?$/

 $('li[class*="http://"]').each(function(){ var pattern = new RegExp('^https?://'); var classes = this.className.split(' '); for(var i = 0, len = classes.length; i < len; i++) { if(pattern.test(classes[i])) { classes[i] = classes[i].replace(/.*?([^/]+)\/?$/, '$1'); } } this.className = classes.join(' '); }); 

 .page-link {color: green;} 

  
some code
 
some code
 
some code