Question

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

<li class="menu-item http://example.com/page-link/">some code</li>

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

<li class="menu-item page-link">some code</li>

我正在考虑使用.replace方法来替换＆＃34; http://example.com/＆＃34;什么都没有，但我不知道删除尾随斜杠和网址的开头。这是我的想法。

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

这就是你正在尝试的事情：

＆＃13;

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);
}

＆＃13;

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

＆＃13;

<li class="menu-item http://example.com/page-link/">some code</li>
<li class="menu-item http://example.com/something/">some code</li>
<li class="http://example.com/go-somewhere/">some code</li>
<li class="menu-item http://example.com/go-somewhere/">some code</li>

＆＃13;

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

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

#r "packages/FSharp.Data.2.2.5/lib/net40/FSharp.Data.dll"
#r "bin/Debug/FSharp.Data.SQLProvider.dll"

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

url = url.split("/");

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li class="menu-item http://example.com/page-link/">some code</li>
<li class="menu-item http://example.com/page-link/">some code</li>
<li class="menu-item http://example.com/page-link/">some code</li>

请注意，我的解决方案有一个正则表达式，可以针对http和https（不包括//example.com/whatever/语法和相对网址）进行测试，但jQuery选择器只会抓取http链接列表项。你可能应该为此创建一个类。像linked-list-item或其他什么。

使用Jquery

4 个答案: