Идеальное преобразование из <div>в <br>в редакторе WYSIWYG - PullRequest
Новая
       5

Идеальное преобразование из <div>в <br>в редакторе WYSIWYG

0 голосов
/ 26 октября 2018

Мне нужно санировать HTML в редакторе WYSIWYG. Вывод не должен содержать никаких <div> с. Все элементы <div> должны быть заменены элементами <br>. Этот оригинальный текст ДОЛЖЕН отображаться так же, как и очищенный текст.

Это моя попытка (обратите внимание на нежелательные лишние пробелы в выводе) - спасибо Nimit за контейнеры рендеринга: 

let text = `<div>aoeu</div><div><ul><li>eu</li><li>a</li></ul><div><br></div></div><div>eu</div>`;
// let text = 'aoeu<ul><li>aoeu</li><ul><li>aoue</li></ul></ul><div><br></div></div></div><div><br></div><div><br></div><div><br></div><div>oe</div><div><ul><li>u</li></ul></div>'

document.getElementById("pre1").innerHTML = "<strong>With Div</strong> </br>" + text;

text = text
.replace(/<div><div>(.*)<\/div><\/div>/g, '<div>$1</div>') // meaningless directly double wrapped divs
.replace(/<div><br><\/div>/g, '<br>') // div with a br is only one newline
.replace(/<div>(?!<div>)(.*?)<\/div>/g, '$1<br>') // divs always make a newline after

document.getElementById("pre2").innerHTML = "<strong>Without Div</strong> </br>" + text;
.preContainer {
  display:inline-block;
  width:200px;
  vertical-align:top;
}

.preContainer:first-child{
  border-right:1px solid black;
}

Так что в принципе я не могу понять, как идеально конвертировать из <div> в <br>. Любая помощь высоко ценится.

1 Ответ

0 голосов
/ 26 октября 2018

Я думаю, что вы можете достичь своего результата с помощью скрипта замены ниже. 

.replace("<div>", "<br>").replace("</div>", "");

Проверьте ниже фрагмент, вы можете проверить оба pre, второй pre не имеет тега div:

function showItInPre(text){
  //let text = `aoeua<div><ul><li>oe</li><li>a</li><li>oeu</li></ul><div><br></div></div><div><br></div><div><br></div><div>aoe</div><div><ul><li>u</li></ul><div><br></div></div><div><br></div><div>u</div><div><div><br></div></div><div>o</div><div><ul><li>o</li><li>o</li><li>a</li><li><br></li></ul></div>`;

  document.getElementById("pre1").innerHTML = "<strong>With Div</strong> </br>" + text;

  text = text
  .replace(/<div><br><\/div>/ig, '<br>')
  .replace(/<\/div><\/div>/ig, '<br>')
  .replace(/<div>/ig, "").replace(/<\/div>/ig, "<br>");

  document.getElementById("pre2").innerHTML = "<strong>Without Div</strong> </br>" + text;
}


document.getElementById("testit").addEventListener("click", function(){showItInPre(document.getElementById("textarea").value)});
.preContainer {
  display:inline-block;
  width:200px;
  vertical-align:top;
}

#pre1{
  border-right:1px solid black;
}

#textarea {
width:500px; height:50px;
}
...