javascript - 替换元素标签和反向转义html实体

Question

我无法控制字符串源，我只能做html() ，但我需要清理源代码中的困惑，

我想删除所有<div class="page"></div>但保留其内容，并且因为内容还包含可能未完全完成的html标签，如 <div class="

http://jsbin.com/vukogobuze/1/edit?html,js,console,output

预期输出

<div class="nodejs-class">La France està déployer ses porte-avions Charles de Gaulle pour soutenir les opérations contre l'État islamique ( IS) en Syrie et en Irak la présidence française a déclaré après une réunion du cabinet de défense</div>

Answer 1

迭代.pageWrap，生成一个以HTML内容作为文本内容的临时元素，最后获取.page中的html内容并加入它们。

var str = '<div id="source-wrapper"><div class="pageWrap">&lt;div class="page"&gt;&amp;lt;div class="nodejs-c&lt;/div&gt;</div><div class="pageWrap">&lt;div class="page"&gt;lass"&amp;gt;La France est &lt;/div&gt;</div><div class="pageWrap">&lt;div class="page"&gt;à déployer ses porte&lt;/div&gt;</div><div class="pageWrap">&lt;div class="page"&gt;-avions Charles de G&lt;/div&gt;</div><div class="pageWrap">&lt;div class="page"&gt;aulle pour soutenir &lt;/div&gt;</div><div class="pageWrap">&lt;div class="page"&gt;les opérations contr&lt;/div&gt;</div><div class="pageWrap">&lt;div class="page"&gt;e l\'État islamique (&lt;/div&gt;</div><div class="pageWrap">&lt;div class="page"&gt; IS) en Syrie et en &lt;/div&gt;</div><div class="pageWrap">&lt;div class="page"&gt;Irak la présidence f&lt;/div&gt;</div><div class="pageWrap">&lt;div class="page"&gt;rançaise a déclaré a&lt;/div&gt;</div><div class="pageWrap">&lt;div class="page"&gt;près une réunion du &lt;/div&gt;</div><div class="pageWrap">&lt;div class="page"&gt;cabinet de défense&amp;lt;/&lt;/div&gt;</div><div class="pageWrap">&lt;div class="page"&gt;div&amp;gt;&lt;/div&gt;</div></div>';


$('body').html(
  $(str)
  // get all pageWrap elements
  .find('.pageWrap')
  // iterate over the elements
  .map(function() {
    // generate a temporaray element with the 
    // text content of current element as its html
    return $('<div>', {
        html: $(this).text()
      })
      // get page element from the temporary element
      .find('.page')
      // get html content from page
      .html();


    // instead of creating a temporary element you 
    // can also do something simple like this by
    // parsing the content
    // return $.parseHTML($(this).text())[0].innerHTML

  })
  // get result as an array
  .get()
  // join them
  .join('')
);

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

<小时/>

更新:如果您想将内容更新到 .source-wrapper div 中，请使用 html()带回调的方法。

var str = '<div id="source-wrapper"><div class="pageWrap">&lt;div class="page"&gt;&amp;lt;div class="nodejs-c&lt;/div&gt;</div><div class="pageWrap">&lt;div class="page"&gt;lass"&amp;gt;La France est &lt;/div&gt;</div><div class="pageWrap">&lt;div class="page"&gt;à déployer ses porte&lt;/div&gt;</div><div class="pageWrap">&lt;div class="page"&gt;-avions Charles de G&lt;/div&gt;</div><div class="pageWrap">&lt;div class="page"&gt;aulle pour soutenir &lt;/div&gt;</div><div class="pageWrap">&lt;div class="page"&gt;les opérations contr&lt;/div&gt;</div><div class="pageWrap">&lt;div class="page"&gt;e l\'État islamique (&lt;/div&gt;</div><div class="pageWrap">&lt;div class="page"&gt; IS) en Syrie et en &lt;/div&gt;</div><div class="pageWrap">&lt;div class="page"&gt;Irak la présidence f&lt;/div&gt;</div><div class="pageWrap">&lt;div class="page"&gt;rançaise a déclaré a&lt;/div&gt;</div><div class="pageWrap">&lt;div class="page"&gt;près une réunion du &lt;/div&gt;</div><div class="pageWrap">&lt;div class="page"&gt;cabinet de défense&amp;lt;/&lt;/div&gt;</div><div class="pageWrap">&lt;div class="page"&gt;div&amp;gt;&lt;/div&gt;</div></div>';


$('body').html(
  $(str)
  // get all pageWrap elements
  .find('.pageWrap')
  // iterate over the elements
  .html(function() {
    // generate a temporaray element with the 
    // text content of current element as its html
    return $('<div>', {
        html: $(this).text()
      })
      // get page element from the temporary element
      .find('.page')
      // get html content from page
      .html();

    // instead of creating a temporary element you 
    // can also do something simple like this by
    // parsing the content
    // return $.parseHTML($(this).text())[0].innerHTML

  }).closest('#source-wrapper')[0].outerHTML
);

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