如何在没有任何内容的情况下替换页面中的某些标记

Question

我正在尝试用空格替换某种情况的双重出现，但它对我不起作用。

小提琴：https://jsfiddle.net/zq0p2fu9/4/

JQuery的：

$(function() {
    var vRepText = "<p>&nbsp;</p><p>&nbsp;</p>";
  $("<p>&nbsp;</p><p>&nbsp;</p>").replaceWith("");
});

简单来说。我想删除只有空格重复的所有P。

我怎样才能实现它。

原件：

<myText>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
    <p>First Text</p>
    <p>&nbsp;</p>
    <p>This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>Second Text</p>
  <p>&nbsp;</p>
    <p>This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...</p>
  <p>&nbsp;</p>
    <p>&nbsp;</p>
  <p>Third Text</p>
  <p>&nbsp;</p>
    <p>This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...</p>
  <p>&nbsp;</p>
    <p>&nbsp;</p>
</myText>

决赛：

<myText>
    <p>First Text</p>
    <p>&nbsp;</p>
    <p>This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...</p>
    <p>Second Text</p>
  <p>&nbsp;</p>
    <p>This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...</p>
  <p>Third Text</p>
  <p>&nbsp;</p>
    <p>This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...</p>
</myText>

Answer 1

重复空段落的正则表达式

您可以使用正则表达式查找重复的空段落，并替换为单个空段落。

https://jsfiddle.net/swr4b4yL/2/

$(function() {
    var bodyHtml = $("body").html();
  bodyHtml = bodyHtml.replace(/(<p>&nbsp;<\/p>\s*)+/g, "<p>&nbsp;</p>");
  $("body").html(bodyHtml);
});

选择并删除所有空段落

你可以遍历段落并删除.html（）等于“ ”的位置

https://jsfiddle.net/crf1b7qm/2/

$(function() {
    var paragraphs = $("p");
  for(var i = 0; i < paragraphs.length; i++){
        var paragraph = paragraphs[i];
    if($(paragraph).html() == "&nbsp;"){
        $(paragraph).remove();
    }
  }
});

Answer 2

你可以试试这个：

$(function() { 
     var allParagraphs = $('p');

   // Check all tags <p></p>
   allParagraphs.each(function(){
     var currentElement = $(this);
     var nextElement =  currentElement.next('p');

     /* We check 3 condition:
     1. Content in current element is empty string
     2. Next element is <p></p>
     3. Content in next element is empty string
     */
     if( isEmptyString(currentElement.text()) &&
         nextElement.length &&
         isEmptyString(nextElement.text())
     ){
        /* 
        If all conditions is true we will remove current element because allParagraphs is live collection. And this approach can cover case when you will have serial of emtpy elements 
        */

        currentElement.remove();
     }
     });

     function isEmptyString(str){
          return $.trim(str) === '';
     }
});

Answer 3

当您明确要删除两个连续元素时，其他解决方案正在删除<p>&nbsp</p>的所有实例或从连续对中留下一个<p>&nbsp</p>。

简单的一行解决方案，vanilla JS

document.body.innerHTML = document.body.innerHTML.replace(/(?:<p>&nbsp;<\/p>\s*){2,}/g, '');

RegEx备注：

• (?:<p>&nbsp;<\/p>\s*) <p>&nbsp<\/p>的非捕获组，包含任意数量的尾随空格，制表符，换行符。
• {2,}必须至少有两个上一个令牌才能匹配。

Regex101

document.body.innerHTML = document.body.innerHTML.replace(/(?:<p>&nbsp;<\/p>\s*){2,}/g, '');

<myText>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
    <p>First Text</p>
    <p>&nbsp;</p>
    <p>This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>Second Text</p>
  <p>&nbsp;</p>
    <p>This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...</p>
  <p>&nbsp;</p>
    <p>&nbsp;</p>
  <p>Third Text</p>
  <p>&nbsp;</p>
    <p>This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...This is a random text we see...</p>
  <p>&nbsp;</p>
    <p>&nbsp;</p>
</myText>

要检查，您可以在控制台中进行检查，并查看是否已删除所有连续的<p>&nbsp;</p>。

Answer 4

问题是你试着调用简单的html。 据我所知，这样做是不可能的。 你需要调用类似HTML标签，类，id的东西。 您的JavaScript / JQuery代码如下所示：

$(".someClass").replaceWith("Some other text here.");
$("#someID").replaceWith("Some other text here.");
$("div").replaceWith("Some other text here."); // this one represents a html tag

我已经分道扬琴，并给了你一个快速/小小的问题：https://jsfiddle.net/Lmvvavjn/2/

Answer 5

你可以使用jquery循环：

$(function() {
  $("p").each(function(i){
    if ($("p")[i + 1] &&
        $("p")[i].innerHTML === ' ' &&
        $("p")[i + 1].innerHTML === ' ' )
       $("p")[i].replaceWith = '';
  });
});

https://jsfiddle.net/zq0p2fu9/6/