Как удалить div-контейнеры оставив только абзац с содержимом?

Olga93

Новичок
Делаю редактор, где при нажатии на кнопки p добавляется абзац, который можно редактировать с помощью атрибута contenteditable="true". Абзац добавляется в контейнер div который создается предварительно вместе с "<p>", еще один контейнер delete, нужен для того чтобы удалить абзац “<p>”. Все это сделано с помощью сreateElement и appendChild.

При нажатии кнопки содержимое iframe отправляется на сервер и там происходит добавление записи в базу. Проблема заключается в том что мне нужен только параграфы, а все лишние элементы div куда помещен параграф и div c кнопкой delete, нужно убрать, кроме того атрибут contenteditable="true" у всех абзацев также следует удалить. Например создала два абзаца Параграф 1 и Параграф 2 при отправке в базу я получаю.

HTML:
<div><p contenteditable="true">Параграф 1</p><div><button class="delete">X</button></div></div><div><p contenteditable="true">Параграф 2</p><div><button class="delete">X</button></div></div>
А что мне нужно получить.

HTML:
<p>Параграф 1</p><p>Параграф 2</p>
Как удалить лишние элементы с помощью регулярных выражений PHP. Вот мой код:
HTML:
<!DOCTYPE html>

<html>
  <head>
  
    <script src="jquery-1.9.1.js"></script>
    <script src="jquery.validate.min.js"></script>
    <script>
    window.onload = function()
    {
    var toolbar = '';
    textareaID = "ct_1";
      var n = textareaID;
     wysiwygWidth = 800;
     wysiwygHeight = 400;
     var iframe = '<table cellpadding="0" cellspacing="0" border="0" style="width:' + wysiwygWidth + 'px; height:' + wysiwygHeight + 'px;border: 1px inset #CCCCCC;"><tr><td valign="top">\n'
  + '<iframe frameborder="0" id="wysiwyg' + n + '"></iframe>\n'
  + '</td></tr></table>\n';
 
  document.getElementById(n).insertAdjacentHTML("afterEnd", toolbar +  iframe);
 
 
  var content = "<html><head>";
    content += "<link rel=\"stylesheet\" type=\"text/css\" href=\"http://test8.su/css/style.css\">";


    content +="</head><body></body></html>";
    
    var doc = document.getElementById("wysiwyg" + n).contentWindow.document;
    
    doc.open();
  doc.write(content);
  doc.close();

 
 
 
 
 
  $("#cmaForm").validate({
    submitHandler: function() {
      desc = document.getElementById("wysiwygct_1").contentWindow.document.body.innerHTML;
       var xhr = new XMLHttpRequest();
        xhr.open("POST", "../action.php", true);
        xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
         var formData = new FormData();
          formData.append('description', desc);
           var jspar = "";
          xhr.send(formData);
          
          xhr.onreadystatechange = function() {
              if(xhr.readyState==4)
              {
              
              }
           }
        
        
        
        
    }
  });
 
  document.getElementById("parag").onmouseup = function()
  {
    
    var rangeElement = document.createElement("div");
  
    var paragraph = document.createElement("p");
    paragraph.contentEditable = true;
  
    paragraph.innerHTML = "<br>";
    var delDiv = document.createElement("div");
 
    delDiv.innerHTML = "<button class=\"delete\">X</button>";
    
    rangeElement.appendChild(paragraph);
    rangeElement.appendChild(delDiv);

    var editor_obj = document.all["wysiwyg" + n];
 
   var editdoc = editor_obj.contentWindow.document;
    
    
    editdoc.body.append(rangeElement);   
    edit1 = document.getElementById("wysiwygct_1").contentWindow;
    
    var range = edit1.document.createRange();
    console.log(range);     
    range.setStart(paragraph, 0);
    range.collapse(true);
    
    edit1.focus();
    var sel = edit1.document.getSelection();
              
    sel.removeAllRanges();
    sel.addRange(range);
   // rangeElement.focus();
  }
 

 
}
    
    
    
    </script>

  </head>

  <body>
  <input type="button" value="P" id="parag"/>
  <input type="text" id="debug" value=""/>
  <form id="cmaForm" method="post" enctype="multipart/form-data" novalidate="novalidate">
 
  <textarea name="description" rows="10" cols="45" id="ct_1" title="Test1" style="display: none;"></textarea>
 
 
  <input type="submit" class="submitbutton" value="Отправить">
  </form>

 

  </body>
</html>
Код action.php, только для теста подключение к БД сделаю позже.
PHP:
<?php
$desc = $_POST["description"];

file_put_contents('text.txt',$desc);
?>
 

weregod

unserializer
PHP:
$desc = preg_replace(["~<div[^>]*>~si", "~</div>~si"], "", $desc);
$desc = preg_replace("~<p[^>]*>~si", "<p>", $desc);
 

Olga93

Новичок
Почти только кнопка button по прежнему добавляется в документ.
HTML:
<p>Параграф 1</p><button class="delete">X</button><p>Параграф 2</p><button class="delete">X</button>
Т.е. div контейнер где находится кнопка button нужно удалить полность вместе с кнопкой.
 

WMix

герр M:)ller
Партнер клуба
я посоветовал бы помечать все не нужные элементы каким нибудь специфическим class, для того чтоб при нажатии на "сохранить", взять копию содержимого, удалить все не нужные элементы помеченные этим class, а уже после отправлять на сервер
HTML:
<p>Параграф 1</p><button class="delete remove-please">X</button><p>Параграф 2</p><button class="delete remove-please">X</button>
JavaScript:
var elements = document.getElementsByClassName('remove-please'); // Только тут поправь под себя
while(elements.length > 0){
    elements[0].parentNode.removeChild(elements[0]);
}
 
Последнее редактирование:

Olga93

Новичок
Получилось, дальше регулярные выражения на php удалят лишние div'ы.
JavaScript:
$("#cmaForm").validate({
    submitHandler: function() {
      desc = document.getElementById("wysiwygct_1").contentWindow.document.body;
    
      
      
      var elements = desc.getElementsByClassName('delete');
      while(elements.length > 0){
          elements[0].parentNode.removeChild(elements[0]);
      }
      
      desc = desc.innerHTML;
       var xhr = new XMLHttpRequest();
        xhr.open("POST", "../action.php", true);
        xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
         var formData = new FormData();
          formData.append('description', desc);
           var jspar = "";
          xhr.send(formData);
          
          xhr.onreadystatechange = function() {
              if(xhr.readyState==4)
              {
              
              }
           }
    }
  });
 

AnrDaemon

Продвинутый новичок
Да вы обкурились или что?

document.querySelector(`парент ваших дивов`).querySelectorAll(`p`)

Дальше расписывать?
 
  • Like
Реакции: AmdY

Olga93

Новичок
вот откуда такие советчики? завязать логику frontend на backend
Если удалить div'ы (без php), на javascript?
Например этот код, удаляет элементы обозначенные классом delete.
HTML:
 var elements = desc.getElementsByClassName('delete');
      while(elements.length > 0){
          elements[0].parentNode.removeChild(elements[0]);
      }
А как убрать div'ы на js?
 

AnrDaemon

Продвинутый новичок
Ты бот или просто глупый?… Ответ прямо над твоим последним постом.
 

Тугай

Новичок
Если только <p> нужны, то да можно так
Код:
let desc = "";
document.querySelector("парент ваших дивов").querySelectorAll("p").forEach(function (e) { desc += "<p>" + e.innerHtml + "</p>"; });
 

AnrDaemon

Продвинутый новичок
Что, других вариантов нет?…
Что вас вечно на innerHTML тянет-то?
 
  • Like
Реакции: AmdY
Сверху