使用Jquery解开div元素后如何找到html

Question

我有以下 html 代码

<div class="main">
  <div id="magicdomid2" class="">
    <center style="width:100%;margin:0 auto;list-style-position:inside;display:block;text-align:center">
      <h1><span class="b"><b>Welcome to Etherpad!</b></span></h1>
    </center>
   </div>
   <div id="magicdomid3" class=""><br></div>
   <div id="magicdomid4" class="">
     <span class="">This pad text is synchronized as you type, so that everyone viewing this page sees the same text. This allows you to collaborate seamlessly on documents!
     </span>
   </div>
   <div id="magicdomid5" class=""><br></div>
   <div id="magicdomid6" class="">
     <span class="">Get involved with Etherpad at </span>
     <span class=" url"><a href="http://etherpad.org">http://etherpad.org</a>
     </span>
   </div>
</div>

这里是html内容

  var html = $(".main").html();

我需要在变量中获取以下htm

<div class="main">

    <center style="width:100%;margin:0 auto;list-style-position:inside;display:block;text-align:center">
      <h1><span class="b"><b>Welcome to Etherpad!</b></span></h1>
    </center>

     <br>
     <span class="">This pad text is synchronized as you type, so that everyone viewing this page sees the same text. This allows you to collaborate seamlessly on documents!
     </span>

     <br>

     <span class="">Get involved with Etherpad at </span>
     <span class=" url"><a href="http://etherpad.org">http://etherpad.org</a>
     </span>

</div>

我尝试了以下代码

 var text = $('div.main div').contents().unwrap().siblings('div').remove();

变量“text”将得到一个对象，我需要一个变量中的html内容。请帮我找到它。

他们是否有可能从 etherpad 导出自定义的 html 或 xml 格式？

Answer 1

愿它有帮助！

var htm = "";
$("div[id^='magicdomid']").each(function(i,val){
htm = htm + $(this).html();
});
$("div[class='main']").empty().html(htm);


//You can also use this for the same
$("div[id^='magicdomid']")
  .contents()
.filter(function() {
  return this.nodeType === 1;
})
  .unwrap()
  .end()      
.filter(function() {
  return this.nodeType === 3;
})
.remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="main">
  <div id="magicdomid2" class="">
    <center style="width:100%;margin:0 auto;list-style-position:inside;display:block;text-align:center">
      <h1><span class="b"><b>Welcome to Etherpad!</b></span></h1>
    </center>
   </div>
   <div id="magicdomid3" class=""><br></div>
   <div id="magicdomid4" class="">
     <span class="">This pad text is synchronized as you type, so that everyone viewing this page sees the same text. This allows you to collaborate seamlessly on documents!
     </span>
   </div>
   <div id="magicdomid5" class=""><br></div>
   <div id="magicdomid6" class="">
     <span class="">Get involved with Etherpad at </span>
     <span class=" url"><a href="http://etherpad.org">http://etherpad.org</a>
     </span>
   </div>
</div>

Answer 2

unwrap 和 contents 在这种情况下可能不是最好的使用，因为它们倾向于修改实际的 DOM 树而不是 html 变量。

试试这个：

// create empty div
var htmlContent = $('<div class="main"></div>');

// loop over magic class & append its content
$('.main .magic').each(function(i, n) {
  htmlContent.append($(this).html());
});

// wrap & move one level above to get "main" div in html string
htmlString = htmlContent.wrap('<div></div>').parent().html();

console.log(htmlString);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <div id="magicdomid2" class="magic">
    <center style="width:100%;margin:0 auto;list-style-position:inside;display:block;text-align:center">
      <h1><span class="b"><b>Welcome to Etherpad!</b></span></h1>
    </center>
  </div>
  <div id="magicdomid3" class="magic"><br></div>
  <div id="magicdomid4" class="magic">
    <span class="">This pad text is synchronized as you type, so that everyone viewing this page sees the same text. This allows you to collaborate seamlessly on documents!
     </span>
  </div>
  <div id="magicdomid5" class="magic"><br></div>
  <div id="magicdomid6" class="magic">
    <span class="">Get involved with Etherpad at </span>
    <span class=" url"><a href="http://etherpad.org">http://etherpad.org</a>
     </span>
  </div>

</div>