在javascript中删除特定标记及其内容
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在javascript中删除特定标记及其内容相关的知识，希望对你有一定的参考价值。
如何在javascript中删除div标签及其内容？
我尝试了以下脚本，但只删除标记并保留内容。
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>答案
假设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>另一答案
编辑：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>
所以它不适用于所有情况。
另一答案
这里是清除或删除html页面上的div内容的示例，你可以选择哪一个适合你也可以计算它们，我已经为你做了这个例子，你可以点击每个div内容，并按照点击它将删除内容。还有一个按钮，如果你点击它，它将计算页面上的所有div清除它的内容，然后完全删除其内容以及其中的子标签子。
保持这个脚本序列的其他方式很重要，它会给出错误，脚本必须在div标签下，这样才能读取div。
我已经使用sweetalert js库来设置消息警报模式以及我在页面中使用了j查询库，请检查剪辑代码。
注意：您的源示例包含在我的代码中，通过单击div它将清除内容并通过单击按钮它将清除并删除，我只留下一个以避免删除，因此您可以调整它并了解它是如何工作的。
编辑：坦率地说，在剪辑后对此进行测试后，我注意到计数器也提供了隐藏div标签的总数，所以我假设这些总数也计算了剪切工具窗口甚至隐藏的那个。
祝好运
<!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>以上是关于在javascript中删除特定标记及其内容的主要内容，如果未能解决你的问题，请参考以下文章
PHP - 字符串 - 删除具有特定类的 HTML 标记，包括其内容