Remove div tag with specific id and retain content

Question

I have a requirement of removing a specific div tag with a unique id from the string and retain content. I want to strip out the div with a id="anchorWrap" as shown belove.

<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 &nbsp;</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 &nbsp;</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;">&nbsp;</span><span class="stl_17 stl_08 stl_09" style="word-spacing:-0.0028em;">solid foods for three years &nbsp;</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 &nbsp</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 &nbsp;</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;">&nbsp;</span><span class="stl_17 stl_08 stl_09" style="word-spacing:-0.0028em;">solid foods for three years &nbsp;</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. Please help me to achieve this.

Thanks in advance.

Answer 1

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 &nbsp;</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 &nbsp;</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;">&nbsp;</span><span class="stl_17 stl_08 stl_09" style="word-spacing:-0.0028em;">solid foods for three years &nbsp;</span></div> </div> </div> </div>

Update: using DOMParser() for htmlString

 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 &nbsp;</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 &nbsp;</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;">&nbsp;</span><span class="stl_17 stl_08 stl_09" style="word-spacing:-0.0028em;">solid foods for three years &nbsp;</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);

Answer 2

Since the html is text, you could create a DOM-element, and set your string to be the innerHTML of that element.

Then, create a document fragment so that you can query the content which is inside the anchorWrap -element:

 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 &nbsp;</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 &nbsp;</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;">&nbsp;</span><span class="stl_17 stl_08 stl_09" style="word-spacing:-0.0028em;">solid foods for three years &nbsp;</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. No need for complex regular expressions.

Answer 3

First, you need to copy the content of the div with id="anchorWrap". Then you have to reach its immediate parent which is span. Then assign that copied value to span. The solution uses 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 &nbsp;</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 &nbsp;</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">&nbsp;</span
            ><span class="stl_17 stl_08 stl_09" style="word-spacing: -0.0028em">solid foods for three years &nbsp;</span>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Solution:

let divValue = $("#anchorWrap").text();
$("#anchorWrap").parent().get(0).innerHTML = divValue

Answer 4

let anchorText = document.getElementById("anchorWrap").innerText;
document.querySelector(".stl_15").innerHTML = anchorText;

this should solve it