Удалить определенные теги и их содержимое в JavaScript - PullRequest
Новая
       35

Удалить определенные теги и их содержимое в JavaScript

0 голосов
/ 31 августа 2018

Как я могу удалить теги div и их содержимое в javascript?

Я попробовал следующий скрипт, но он удаляет только теги и оставляет содержимое. 

var res, html = document.getElementById('source').value;
res = html.replace(/(<div[^>]+>|<div>|<\/div>)/g, "");
document.getElementById('result').innerHTML = res;
textarea {
  width: 100%;
  height: 120px;
  padding: 5px;
  border: 1px solid rgba(0, 0, 0, .3);
}
<textarea id="source">
  <p>
      <input type="text"/>
      <div class="parent"><div>inner01</div><div>inner02</div></div>
      <span></span>
  </p>
</textarea>
<textarea id="result"></textarea>

Ответы [ 3 ]

0 голосов
/ 01 сентября 2018

здесь пример для очистки или удаления содержимого div на html-странице, вы можете выбрать, какой из них подходит, и вы также можете считать их, у меня есть сделал этот пример для вас, где вы можете нажать на каждый элемент div и в соответствии с кликом он будет удалять контент. также есть кнопка , если вы нажмете ее, она будет считать все деления на странице, очистит ее содержимое, затем полностью удалит его содержимое вдоль с sub тегами внутри ребенка.

важно сохранить эту последовательность сценариев другими способами, которые приведут к ошибке, и сценарии должны находиться под тегами div, чтобы он мог читать элементы div.

Я использовал библиотеку Sweetalert JS для стилизации модальных уведомлений о сообщениях, а также я использовал библиотеку j запросов на странице, пожалуйста, проверьте снипп-код.

примечание: Ваш исходный пример включен в мой код, и путем нажатия в div он будет очистить содержимого & нажав в Кнопка очистит и удалит , я оставил только одну, чтобы избежать удаления , чтобы вы могли настроить ее и понять, как она работает.

Отредактировано: Откровенно говоря, после тестирования этого на snip, я заметил, что счетчики дают итоговые значения скрытых тегов div, поэтому я предполагаю, что эти итоговые значения учитывают также окно инструмента snip, даже скрытое.

удачи 

<!DOCTYPE html>
<html>



<!-- must use in order to make XP Themes render -->
<meta HTTP-EQUIV="MSThemeCompatible" content="Yes" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</head>


<body>

<div id="unknown_id_Number">

<textrea id="unknown_idtxtbox">
<p>
  <input type="text"/>
  <div class="parent"><div>inner01</div><div>inner02</div></div>
  <span></span>
</p>
</textarea>
<textarea id="result"></textarea>
</div>

<div id="div6">

<textrea>
<p>
  <input type="text"/>
  <div class="parent"><div>inner01</div><div>inner02</div></div>
  <span></span>
</p>
</textarea>
<textarea id="result"></textarea>
</div>



<div id = "div1" value="i am div content" style= "width:200px;height:70px;background:orange;text-align:center;padding:5%;color:white;">
i am content of div1

</div>

<div id = "#div2" value="txt2"  style= "width:200px;height:70px;background:pink;text-align:center;">
i am content of div2

</div>

<div id = 'div3' value="txt3"  style= "width:200px;height:70px;background:green;text-align:center;">
i am content of div3

</div>




<button onclick="removealldiv()">Click to remove all div contents</button>

<script>
function removealldiv(){

// insert total divs on divs variable
var divs = document.getElementsByTagName("div");


for(var i = 0; i < divs.length; i++){
   //do something to each div like

   divs[i].innerHTML = " ";
   divs[i].remove();
if ( i = i ) {
swal("i have clear then removed about "+ i +" div's on this page ",'success');
}
}


}
</script>

<script>




$("div").click( function(){


    var name = $(this).attr("id");
  

swal({
  title: "Are you sure you want to delete the content of div id = " +name+"?",
  text: "if you click delete , the content of your div will be removed",
  icon: "warning",
  buttons: true,
  dangerMode: true,
})
.then((willDelete) => {
  if (willDelete) {
    swal("Poof! your div content is cleared now ", {

      icon: "success",
    });
if  ( name = name )  {
         $(this).text(' ');
    }
  }


 else {
    swal("your div content is safe , the content will remain on page ");
  }
});

});

</script>




</body>


</html>
0 голосов
/ 01 сентября 2018

Предполагая, что div является действительной строкой, попробуйте вместо этого следующее регулярное выражение: 

<div.*<\/div>
  • Точка - это любой отдельный символ: .
  • , за которой следует звездочка, равняется нулю или более, независимо от того, что ему предшествует: * *
  • и для того, чтобы истолковать косую черту в буквальном смысле, избегайте обратной косой черты: \

* плюс: + также будет достаточно - один или несколько экземпляров того, что ему предшествует. 

var res, html = document.getElementById('source').value;
res = html.replace(/<div.*<\/div>/g, "");
document.getElementById('result').innerHTML = res;
textarea {
  width: 100%;
  height: 120px;
  padding: 5px;
  border: 1px solid rgba(0, 0, 0, .3);
}
<textarea id="source">
  <p>
      <input type="text"/>
      <div class="parent"><div>inner01</div><div>inner02</div></div>
      <span></span>
      <div class="parent"><input></div>
  </p>
</textarea>
<textarea id="result"></textarea>

Примечание: Добавлен дополнительный div, чтобы продемонстрировать, что несколько экземпляров удаляются правильно и без удаления «тегов», встречающихся между div «тегами».

0 голосов
/ 31 августа 2018

РЕДАКТИРОВАТЬ: epascarello указал, что я идиот, так что это должно быть приемлемо по крайней мере в этом примере:

HTML: 

<textarea id="source">
  <p>
    <input type="text">
    <div id="parent"><div>inner01</div><div>inner02</div></div>
    <span></span>
  </p>
</textarea>
<textarea id="result"></textarea>
<button onclick="removeDiv()">
Click me to remove div!
</button>

JS: 

function removeDiv() {
  var string = document.getElementById("source").value;
  var s1 = string.split("<div")[0];
  var s2 = string.split("</div>");
  string = s1 + s2[s2.length-1];
  document.getElementById("result").value = string;
}

Проблема: Это удаляет все между первым открывающим тегом div и последним закрывающим тегом div, поэтому, если есть что-то, что вы хотите оставить между ними, оно будет удалено , Пример: 

<p>
  <div>Some stuff</div>
  <span>Stuff to keep</span>
  <div>Some other stuff</div>
</p>

В итоге получится как: 

<p>
</p>

Так что это не будет работать в каждом случае.

...