[英]Remove div tag with specific id and retain content
I have a requirement of removing a specific div tag with a unique id from the string and retain content.我需要从字符串中删除具有唯一 id 的特定 div 标签并保留内容。 I want to strip out the div with a id="anchorWrap" as shown belove.
我想用 id="anchorWrap" 去掉 div,如图所示。
<div class="stl_ stl_02">
<div class="stl_view">
<div class="stl_05 stl_06">
<div class="stl_01" style="left:18.0477em;top:1.7673em;"><span class="stl_15 stl_08 stl_16" style="word-spacing:0.1552em;"><div style="background:#bba61c; display: inline-block;" id="anchorWrap">Chief Complaint </div></span></div>
<div class="stl_01" style="left:1.6em;top:17.4546em;"><span class="stl_17 stl_08 stl_18" style="word-spacing:0.0066em;">This is a 37 y.o. WM who presents with </span></div>
<div class="stl_01" style="left:1.6em;top:21.0546em;"><span class="stl_17 stl_08 stl_19" style="word-spacing:-0.0041em;">dysphagia of</span><span class="stl_17 stl_08 stl_14" style="word-spacing:0.1527em;"> </span><span class="stl_17 stl_08 stl_09" style="word-spacing:-0.0028em;">solid foods for three years </span></div>
</div>
</div>
</div>
The expected result is预期的结果是
<div class="stl_ stl_02">
<div class="stl_view">
<div class="stl_05 stl_06">
<div class="stl_01" style="left:18.0477em;top:1.7673em;"><span class="stl_15 stl_08 stl_16" style="word-spacing:0.1552em;">Chief Complaint  </span></div>
<div class="stl_01" style="left:1.6em;top:17.4546em;"><span class="stl_17 stl_08 stl_18" style="word-spacing:0.0066em;">This is a 37 y.o. WM who presents with </span></div>
<div class="stl_01" style="left:1.6em;top:21.0546em;"><span class="stl_17 stl_08 stl_19" style="word-spacing:-0.0041em;">dysphagia of</span><span class="stl_17 stl_08 stl_14" style="word-spacing:0.1527em;"> </span><span class="stl_17 stl_08 stl_09" style="word-spacing:-0.0028em;">solid foods for three years </span></div>
</div>
</div>
</div>
I tried this regex我试过这个正则表达式
let anchorString = anchorText.replace(/<div id="anchorWrap">\s*(.*?)\s*<\/div>/gi, "");
But was not able to remove that div.但无法删除该 div。 Please help me to achieve this.
请帮助我实现这一目标。
Thanks in advance.提前致谢。
You can try the following way:您可以尝试以下方法:
var el = document.getElementById('anchorWrap'); // get the element var pe = el.parentNode; // get parent while(el.firstChild) pe.insertBefore(el.firstChild, el); // insert content pe.removeChild(el); // remove el
<div class="stl_ stl_02"> <div class="stl_view"> <div class="stl_05 stl_06"> <div class="stl_01" style="left:18.0477em;top:1.7673em;"><span class="stl_15 stl_08 stl_16" style="word-spacing:0.1552em;"><div style="background:#bba61c; display: inline-block;" id="anchorWrap">Chief Complaint </div></span></div> <div class="stl_01" style="left:1.6em;top:17.4546em;"><span class="stl_17 stl_08 stl_18" style="word-spacing:0.0066em;">This is a 37 yo WM who presents with </span></div> <div class="stl_01" style="left:1.6em;top:21.0546em;"><span class="stl_17 stl_08 stl_19" style="word-spacing:-0.0041em;">dysphagia of</span><span class="stl_17 stl_08 stl_14" style="word-spacing:0.1527em;"> </span><span class="stl_17 stl_08 stl_09" style="word-spacing:-0.0028em;">solid foods for three years </span></div> </div> </div> </div>
Update: using DOMParser()
for htmlString更新:对htmlString使用
DOMParser()
var elStr = `<div class="stl_ stl_02"> <div class="stl_view"> <div class="stl_05 stl_06"> <div class="stl_01" style="left:18.0477em;top:1.7673em;"><span class="stl_15 stl_08 stl_16" style="word-spacing:0.1552em;"><div style="background:#bba61c; display: inline-block;" id="anchorWrap">Chief Complaint </div></span></div> <div class="stl_01" style="left:1.6em;top:17.4546em;"><span class="stl_17 stl_08 stl_18" style="word-spacing:0.0066em;">This is a 37 yo WM who presents with </span></div> <div class="stl_01" style="left:1.6em;top:21.0546em;"><span class="stl_17 stl_08 stl_19" style="word-spacing:-0.0041em;">dysphagia of</span><span class="stl_17 stl_08 stl_14" style="word-spacing:0.1527em;"> </span><span class="stl_17 stl_08 stl_09" style="word-spacing:-0.0028em;">solid foods for three years </span></div> </div> </div> </div>`; var parser = new DOMParser(); var htmlDoc = parser.parseFromString(elStr, 'text/html'); var el = htmlDoc.getElementById('anchorWrap'); // get the element var pe = el.parentNode; // get parent while(el.firstChild) pe.insertBefore(el.firstChild, el); // insert content pe.removeChild(el); // remove el elStr = htmlDoc.querySelector("body").innerHTML console.log(elStr);
Since the html is text, you could create a DOM-element, and set your string to be the innerHTML of that element.由于 html 是文本,您可以创建一个 DOM 元素,并将您的字符串设置为该元素的 innerHTML。
Then, create a document fragment so that you can query the content which is inside the anchorWrap
-element:然后,创建一个文档片段,以便您可以查询
anchorWrap
元素内的内容:
const anchorText = `<div id="anchorWrap"><div class="stl_ stl_02"> <div class="stl_view"> <div class="stl_05 stl_06"> <div class="stl_01" style="left:18.0477em;top:1.7673em;"><span class="stl_15 stl_08 stl_16" style="word-spacing:0.1552em;"><div style="background:#bba61c; display: inline-block;" id="anchorWrap">Chief Complaint </div></span></div> <div class="stl_01" style="left:1.6em;top:17.4546em;"><span class="stl_17 stl_08 stl_18" style="word-spacing:0.0066em;">This is a 37 yo WM who presents with </span></div> <div class="stl_01" style="left:1.6em;top:21.0546em;"><span class="stl_17 stl_08 stl_19" style="word-spacing:-0.0041em;">dysphagia of</span><span class="stl_17 stl_08 stl_14" style="word-spacing:0.1527em;"> </span><span class="stl_17 stl_08 stl_09" style="word-spacing:-0.0028em;">solid foods for three years </span></div> </div> </div> </div></div>`; // html string // create DOM element var tmpEl = document.createElement('div'); // set the content of that element from our html text tmpEl.innerHTML = anchorText; // create document fragment const fragmet = document.createDocumentFragment(); // add the created html-element into the fragment so we can run DOM-queries fragmet.appendChild(tmpEl); // query the element (now it is a HTMLElement, not a string) const anchorWrapEl = fragmet.getElementById('anchorWrap'); // get all the content within the anchorWrap-element const anchorWrapConent = anchorWrapEl.innerHTML; console.log('here is our result', anchorWrapConent);
If you are able to run the code in a web browser, I think this should work.如果您能够在 web 浏览器中运行代码,我认为这应该可以。 No need for complex regular expressions.
不需要复杂的正则表达式。
First, you need to copy the content of the div with id="anchorWrap".首先,您需要复制 id="anchorWrap" 的 div 的内容。 Then you have to reach its immediate parent which is span.
然后你必须到达它的直接父级,即跨度。 Then assign that copied value to span.
然后将该复制的值分配给 span。 The solution uses jquery.
该方案使用jquery。
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<body>
<div class="stl_ stl_02">
<div class="stl_view">
<div class="stl_05 stl_06">
<div class="stl_01" style="left: 18.0477em; top: 1.7673em">
<span class="stl_15 stl_08 stl_16" style="word-spacing: 0.1552em"
><div style="background: #bba61c; display: inline-block" id="anchorWrap">Chief Complaint </div></span
>
</div>
<div class="stl_01" style="left: 1.6em; top: 17.4546em">
<span class="stl_17 stl_08 stl_18" style="word-spacing: 0.0066em">This is a 37 y.o. WM who presents with </span>
</div>
<div class="stl_01" style="left: 1.6em; top: 21.0546em">
<span class="stl_17 stl_08 stl_19" style="word-spacing: -0.0041em">dysphagia of</span><span class="stl_17 stl_08 stl_14" style="word-spacing: 0.1527em"> </span
><span class="stl_17 stl_08 stl_09" style="word-spacing: -0.0028em">solid foods for three years </span>
</div>
</div>
</div>
</div>
</body>
</html>
Solution:解决方案:
let divValue = $("#anchorWrap").text();
$("#anchorWrap").parent().get(0).innerHTML = divValue
let anchorText = document.getElementById("anchorWrap").innerText;
document.querySelector(".stl_15").innerHTML = anchorText;
this should solve it这应该解决它
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.