Remove "|" from html

Remove "|" from html

本文关键字：quot html from Remove      更新时间：2023-09-26

我无法编辑html，所以是否有一种方法可以使用css删除下面每个标签之间的" | "。如果不使用css，可以使用javascript或jquery

<span class="reportnavigation">
    <span class="reportnavigationheader">
        Go To Week: 
    </span>
    <a href="/2014/options?L=33742&W=1&O=06&F=0000"></a>
     | 
    <a href="/2014/options?L=33742&W=2&O=06&F=0000"></a>
     | 
    <a href="/2014/options?L=33742&W=3&O=06&F=0000"></a>
     | 
    <a href="/2014/options?L=33742&W=4&O=06&F=0000"></a>
     | 
    <a href="/2014/options?L=33742&W=5&O=06&F=0000"></a>
     | 
    <a href="/2014/options?L=33742&W=6&O=06&F=0000"></a>
     | 
    <a href="/2014/options?L=33742&W=7&O=06&F=0000"></a>
</span>
使用jQuery: 
$('.reportnavigation').contents().filter(function() {
     return this.nodeType === 3 && $.trim(this.nodeValue) === '|';
}).remove();

我看到你有相当多的JavaScript解决方案，但使用JavaScript替换HTML将需要重新初始化绑定在元素上的任何事件，例如单击<a>元素上的事件(除了解决方案@undefined张贴)。

你不能用CSS删除它，你只能隐藏它。诀窍是使用font-size:0;，这将使字符不可见。你还需要添加一个额外的规则，使<span>的子元素的字体大小大于0。

另外，可能需要一些额外的调整，这取决于页面现有的CSS。

.reportnavigation {font-size:0;}
.reportnavigation * {font-size:12px;}

这是一个jsfiddle: http://jsfiddle.net/76wtR/1/

正如在注释中已经提到的，您可以使用正则表达式来替换它:

$('.reportnavigation').html($('.reportnavigation').html().replace(/'|/g,''));

小提琴

纯CSS解决方案怎么样?

Codepen 

body {
  background-color: white;
}
a + a {
  background-color: white;
  margin-left: -0.43em;
}
a {
  margin-right: 20px; /* whatever value you want */
}

这个-0.43em值是从Yahoo!纯CSS框架:http://blog.purecss.io/post/60789414532/how-we-improved-grids-in-pure-0-3-0
这相当于4px——空白的宽度——除了更兼容。它解决了(在CSS中)块之间显示为inline-block的4px间隙的问题，并且可以在这里通过叠加下一个字符来隐藏它。

相关文章：