如何在面包屑中删除斜杠

时间:2017-10-10 17:14:59

标签: javascript jquery css

output as picture below

由于php加密,我无法自定义php。它可以通过JavaScript / jQuery吗?

<ul class="breadcrumb">
<a href="index.php">Home </a> / <a href="about.php">About</a> / <a href="contact.php">Contact</a> 

3 个答案:

答案 0 :(得分:2)

你可以用jQuery和一些RegEx完成它。

请注意:假设您的代码没有包含<li>标记的<a>个标记

const regex = /(<\/a>).*?\//g;
const str = $('.breadcrumb').html();
const subst = `$1`;

// The substituted value will be contained in the result variable
const result = str.replace(regex, subst);
$('.breadcrumb').html(result)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="breadcrumb">
    <a href="index.php">Home </a> / <a href="about.php">About</a> / <a href="contact.php">Contact</a> 
</ul>

答案 1 :(得分:0)

这里不需要jQuery(注意:我绝对不会在生产中使用它)。

<ul class="breadcrumb">
<li><a href="index.php">Home </a> / </li>
<li><a href="about.php">About</a> / </li>
<li><a href="contact.php">Contact</a> </li>
</ul>
const toArray = (nodeList) => Array.prototype.slice.call(nodeList);

toArray(document.querySelectorAll('.breadcrumb'))
    .map    ((node)     => toArray(node.childNodes))
    .reduce ((acc, val) => acc.concat(val), [])
    .filter ((node)     => node.nodeType === Node.TEXT_NODE
                        && node.textContent.indexOf('/') !== -1)
    .forEach((node)     => node.textContent = node.textContent.replace(/\//g, ''));

编辑:这是一个可以容纳完全错误的HTML标记的变体:

<ul class="breadcrumb">
    <a href="index.php">Home </a> / 
    <a href="about.php">About</a> / 
    <a href="contact.php">Contact</a> 
</ul>
Sub Test()
  Dim aSkype As SKYPE4COMLib.Skype
  Set aSkype = New SKYPE4COMLib.Skype
  Dim oChat As Chat
  Dim skUser As SKYPE4COMLib.User

  Set oMembers = CreateObject("Skype4COM.UserCollection")
  oMembers.Add (oSkype.User("user_name1"))
  oMembers.Add (oSkype.User("user_name2"))

  Set oChat = oSkype.CreateChatMultiple(oMembers)
  oChat.OpenWindow
  oChat.Topic = "Group Chat Topic"
  oChat.SendMessage "automated message"
End Sub

答案 2 :(得分:0)

用css可以轻松实现。注意:您的html结构错误。

<ul class="breadcrumb">
<li>
<a href="index.php">Home </a> 
</li>
<li>
<a href="about.php">About</a> </li><li> <a href="contact.php">Contact</a> </li></ul>

<强> CSS

ul.breadcrumb{

}
ul.breadcrumb li{
    display:inline-block;
}

ul.breadcrumb li+li:before{
    content:"/";
    display:inline-block;
}

https://jsfiddle.net/9q1m0on9/