刪除具有特定 id 的 div 標簽並保留內容

Question

我需要從字符串中刪除具有唯一 id 的特定 div 標簽並保留內容。 我想用 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 &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>

預期的結果是

<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>

我試過這個正則表達式

let anchorString = anchorText.replace(/<div id="anchorWrap">\s*(.*?)\s*<\/div>/gi, "");

但無法刪除該 div。 請幫助我實現這一目標。

提前致謝。

Answer 1

您可以嘗試以下方法：

 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>

更新：對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 &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

由於 html 是文本，您可以創建一個 DOM 元素，並將您的字符串設置為該元素的 innerHTML。

然后，創建一個文檔片段，以便您可以查詢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 &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);

如果您能夠在 web 瀏覽器中運行代碼，我認為這應該可以。 不需要復雜的正則表達式。

Answer 3

首先，您需要復制 id="anchorWrap" 的 div 的內容。 然后你必須到達它的直接父級，即跨度。 然后將該復制的值分配給 span。 該方案使用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>

解決方案：

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

Answer 4

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

這應該解決它