Question

我无法控制字符串来源，我只能<div class="page"></div>，但我需要清理源代码中的混乱，

我想删除所有<div class="但保留其内容，因为内容还包含可能无法完全完成的html标记，如<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>

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

预期产出

/requests

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>

Answer 2

var list = document.getElementsByTagName("div");
for(i=0;i<list.length;i++){
   var div = list[i];
if(div.class == "page"){
  div.outerHTML = (div.outerHTML).replace('<div class="page">',"");
// Just do this again with '</div>' if you are sure there isnt a div inside of this one, else use this hard way
var diva = (div.outerHTML).split("</div>");
diva.pop(); // Remove the last </div> of the element
div.outerHTML = diva.join("</div>"); // Give back the removed DIV endings that arent the one you are replacing
}
}

替换元素标记和反向转义html实体

2 个答案: