jquery 隐藏 显示 html 标签 非内容

Question

<div>
    <span class='red'>test0<span class='line'>test1</span></span><span class='blue'>test2</span>
</div>
隐藏标签变成这样的:
<div>
    <!--<span class='red'>-->test0<!--<span class='line'>-->test1<!--</span>--><!--</span>--><!--<span class='blue'>-->test2<!--</span>-->
</div>
显示标签去除各标签的 <!-- -->如果用 $('span').removeAttr("class"); 那么恢复显示时需要全部从服务器去取,不建议.
请问用jquery如何实现注释掉标签呢?

Answer 1

看看这样OK不
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
    $(function () {
     //获取注释的HTML
        var html = $('#div1').html();        
        //把注释替换掉
        var html2 = html.replace(/<!--([\s\S]*?)-->/g , '$1');
        //将注释替换后的HTML添加到div2中
        $('#div2').html(html2);
    })
</script><span style="font-size: 16px;"><div>
    <span class='red'>test0<span class='line'>test1</span></span><span class='blue'>test2</span>
</div></span>
<span style="font-size: 18px;">隐藏标签变成这样的:</span>
<span style="font-size: 16px;"><div id="div1">
    <!--<span class='red'>-->test0<!--<span class='line'>-->test1<!--</span>--><!--</span>--><!--<span class='blue'>-->test2<!--</span>-->
</div></span>
<span style="font-size: 18px;">显示标签去除各标签的 <!-- --></span>
<div id="div2"></div> 
<span style="font-size: 18px;">如果用 $('span').removeAttr("class"); 那么恢复显示时需要全部从服务器去取,不建议.
请问用jquery如何实现注释掉标签呢?</span>

Answer 2

谢谢!
但这个正则好像无效哎!
alert(html) 出来的什么都没变啊
<span>test</span>---->>> <!--<span>-->test<!--</span>-->

Answer 3

var html = $('#div1').html();        
        //把注释替换掉
var html2 = html.replace(/<!--([\s\S]*?)-->/g , '$1');
alert(html2)  //好像没有替换掉啊

Answer 4

<span>test</span> 转换成 <!--<span>-->test<!--</span>-->
然后再转回来
<!--<span>-->test<!--</span>--> 转回成 <span>test</span>

Answer 5

HTML我也改了下，你把我那段代码复制运行一下，看下是不是你要的效果。

Answer 6

按照你的复制的!你的代码没有 div1 div2我用replaceWith快搞定了

Answer 7

好用的!谢谢
那请问第一步用正则怎么做呢?
把
<span class='red'><span class='line'></span></span><span class='blue'></span>
变成
<!--<span class='red'>-->test0<!--<span class='line'>-->test1<!--</span>--><!--</span>--><!--<span class='blue'>-->test2<!--</span>-->

Answer 8

注释在IE下获取不到的，所以最好是通过设置class来实现样式的切换至于你说的$('span').removeAttr("class"); 那么恢复显示时需要全部从服务器去取,不建议.不知道什么意思，设置class不会和服务器交互<style>
.red{color:red}
.line{display:block;}
.blue{color:blue}
</style>
<script src="http://www.coding123.net/js/jquery.js"></script>
<span style="font-size: 16px;"><div id="dv1">
    <span class='red'>test0<span class='line'>test1</span></span><span class='blue'>test2</span>
</div></span>
<input type="button" value="隐藏" onclick="toggle(this)"/>
<script>
function toggle(btn){
  var hide=btn.value=='隐藏';
  $('#dv1 span').each(function(){
     this.className=hide?this.className+'--hide':this.className.replace('--hide','')
  }); 
 btn.value=hide?'显示':'隐藏';
}
</script>

Answer 9

var html1 = "<span class='red'><span class='line'></span></span><span class='blue'></span>";
var i = 0 ;
var html2 = html1.replace(/(<[^>]*>)/g , function(){
if(/\//.test(arguments[0])){
return '<!--'+arguments[0]+'-->';
}else{
return '<!--'+arguments[0]+'-->test'+i++;
}
});

Answer 10

@bbjbepzz
不好意思,由于我没有说清楚,所以意思没明白!test0 test1 test2只是我为了描述这样写的.
其实是span标签的内容不变化,
只是把
<span class=''>变成<!--<span class=''>-->
以及
</span>变成<!--</span>-->
就好!
 <span class='red'>xxxx<span class='line'>yyyy</span></span><span class='blue'>zzzz</span>
转变成
 <!--<span class='red'>-->xxxx<!--<span class='line'>-->yyyy<!--</span>--><!--</span>--><!--<span class='blue'>-->zzzz<!--</span>-->

Answer 11

补充上面的内容,只转变 span 标签,其他标签的不动.文中还有其他标签呢,如div ul li 标签等等不加 <!-- -->只对 span标签做转换!!!

Answer 12

@showbo
您的做法很神奇!!!  但是存在这样的问题:如果class 是两个的时候或者多个呢?
如下我加了个underline ,请试试.谢谢<style>
.red{color:red}
.line{display:block;}
.blue{color:blue}
.underline{text-decoration:underline}
</style>
<script src="http://www.coding123.net/js/jquery.js"></script>
<span style="font-size: 16px;"><div id="dv1">
    <span class='red  underline'>test0<span class='line '>test1</span></span><span class='blue underline'>test2</span>
</div></span>
<input type="button" value="隐藏" onclick="toggle(this)"/>
<script>
function toggle(btn){
  var hide=btn.value=='隐藏';
  $('#dv1 span').each(function(){
     this.className=hide?this.className+'--hide':this.className.replace('--hide','')
  }); 
 btn.value=hide?'显示':'隐藏';
}
</script>

Answer 13

var html1 = "<span class='red'>aaa<span class='line'>bbb</span></span>ccc<span class='blue'></span>";
var i = 0 ;
var html2 = html1.replace(/(<[\/]?span[^>]*>)/g , function(){
return '<!--'+arguments[0]+'-->';
});

Answer 14

好用, 
谢谢但有时当alert出现 &gt;这个符号. 此时将会出现问题.但是不知道其什么时候发生! 幸好不常出现.刷新就好万分感谢!

Answer 15

   <span class='red'>test0<span class='line'>test1</span></span><span class='blue'>test2</span>
</div></span>
<span style="font-size: 18px;">隐藏标签变成这样的:</span>
<span style="font-size: 16px;"><div>
    <!--<span class='red'>-->test0<!--<span class='line'>-->test1<!--</span>--><!--</span>--><!--<span class='blue'>-->test2<!--</span>-->
</div></span>
<span style="font-size: 18px;">显示标签去除各标签的 <!-- --></span>
 
<span style="font-size: 18px;">如果用 $('span').removeAttr("class"); 那么恢复显示时需要全部从服务器去取,不建议.
请问用jquery如何实现注释掉标签呢?</span>好期待

Answer 16

发电公司span class='red'>test0<span class='line'>test1</span></span><span class='blue'>test2</span>
</div></span>
<span style="font-size: 18px;">隐藏标签变成