如何在JQuery中將嵌套的span替換為div元素？-有解無憂

我正在嘗試檢查給定的元素是否具有帶有屬性名稱的htmlData嵌套（父、子而非兄弟）span元素data-fact。

如果確實如此，則將其替換為spantodiv并class='inline-span'通過它傳遞所有屬性。否則只需回傳htmlData

var htmlData = `<p style="font: 10pt Times New Roman, Times, Serif; margin: 0pt 0;" xvid="f5ea22ec52553bc61525766b631e126f">
  <span xvid="2b80c95cd4b851345ba4c3fe6937d30b" conceptid="619959bc062c677faebd7a6f" xbrlid="rr:ProspectusDate" class="manual-map" data-fact="619959c0062c677faebd7b55">
    <span xvid="ca5635a4e4de332d7dc3036a68e57009" class="wrapped manual-map" data-fact="619959c0062c677faebd7b57">November 1, 2021</span>
  </span>
</p>
`
replaceTags(htmlData)

function replaceTags (htmlData) {
var $elm = $(htmlData).find("span[data-fact]");
var $nestedElm = $elm.children().length > 1;
        if($nestedElm){
            htmlData = htmlData.replace(/<span/g, '<div  ');
            htmlData = htmlData.replace(/<\/span>/g, '<\/div>');
        }else{
            return htmlData;
        }
    },

htmlData我想要的輸出是這樣的

<p style="font: 10pt Times New Roman, Times, Serif; margin: 0pt 0;" xvid="f5ea22ec52553bc61525766b631e126f">
  <div class='inline-span' xvid="2b80c95cd4b851345ba4c3fe6937d30b" conceptid="619959bc062c677faebd7a6f" xbrlid="rr:ProspectusDate" class="manual-map" data-fact="619959c0062c677faebd7b55">
    <div  class='inline-span' xvid="ca5635a4e4de332d7dc3036a68e57009" class="wrapped manual-map" data-fact="619959c0062c677faebd7b57">November 1, 2021</div>
  </div>
</p>

在這里我無法找到span元素是否嵌套，然后轉換如何將class='inline-span'帶有所有先前屬性的div.

PS：我想要的答案在 JQuery 中

uj5u.com熱心網友回復：

用字串替換來改變 HTML 通常是一個壞主意。您應該改用 jquery 的工具來操作 DOM。哪個更安全，更不容易出錯。

const replaceTags = ($tagToReplace) => { 
  // create a copy of the htmlData
  const $cloned = $tagToReplace.clone();
  
  // While there are still more span's in the p
  while ($cloned.find('span[data-fact]').length > 0) {
    // get the next span to replace with a div
    const $span = $($cloned.find('span[data-fact]')[0]);

    // create the new div
    const $newDiv = $('<div>');
    // copy the span's html into the div
    $newDiv.html($span.html());

    // For each attribute in the span ...
    $.each($span[0].attributes, (_ , attr) => {
      // ... set the new div to have the span's attribute.
      $newDiv.attr(attr.name, attr.value);
    });

    // new div needs 'inline-span' property.
    $newDiv.addClass('inline-span');

    // finally replace the span with the new div
    $span.replaceWith($newDiv);
  }
  
  return $cloned;
}

// select tag to replace
const $tagToReplace = $('p');
// get the new cloned tag
const $newHtmlData = replaceTags($tagToReplace);

// add the cloned to the body
$('body').append($newHtmlData);
// print that new elements html
console.log($newHtmlData[0].outerHTML);

p {
  padding: 8px;
  border: 1px dashed green;
}

span[data-fact] {
  border: 1px solid red;
  padding: 3px;
}

div[data-fact] { 
  border: 1px solid blue;
  padding: 3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p style="font: 10pt Times New Roman, Times, Serif; margin: 0pt 0;" xvid="f5ea22ec52553bc61525766b631e126f">
  <span xvid="2b80c95cd4b851345ba4c3fe6937d30b" conceptid="619959bc062c677faebd7a6f" xbrlid="rr:ProspectusDate" class="manual-map" data-fact="619959c0062c677faebd7b55">
    <span xvid="ca5635a4e4de332d7dc3036a68e57009" class="wrapped manual-map" data-fact="619959c0062c677faebd7b57">November 1, 2021</span>
  </span>
</p>

注意：在 HTML 中包含div標簽是無效的，p因此也應該替換p標簽。

uj5u.com熱心網友回復：

我做了一些與在 HTML 元素中查找和替換 jquery 代碼相關的更改，這里是一個作業演示，希望對您有所幫助。

你可以直接用like替換所有的html

htmlData = htmlData.replace($factElem[0].outerHTML, 'div html');

使用$factElem[0].outerHTML你可以找到包含[data-fact] html 的元素。是的，您只能使用資料事實進行檢查并將其替換為 div 不需要跨度

我更新了代碼請現在檢查。

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                var htmlData = '<p style="font: 10pt Times New Roman, Times, Serif; margin: 0pt 0;" xvid="f5ea22ec52553bc61525766b631e126f"><span xvid="2b80c95cd4b851345ba4c3fe6937d30b" conceptid="619959bc062c677faebd7a6f" xbrlid="rr:ProspectusDate" class="manual-map" data-fact="619959c0062c677faebd7b55"><span xvid="ca5635a4e4de332d7dc3036a68e57009" class="wrapped manual-map" data-fact="619959c0062c677faebd7b57">November 1, 2021</span></span></p>'
                replaceTags(htmlData);
            });
        });
        function replaceTags(htmlData) {
            var $factElem = $(htmlData).find('[data-fact]');
            if ($factElem) {
                htmlData = htmlData.replace($factElem[0].outerHTML, '<div class="inline-span" xvid="2b80c95cd4b851345ba4c3fe6937d30b" conceptid="619959bc062c677faebd7a6f" xbrlid="rr:ProspectusDate" class="manual-map" data-fact="619959c0062c677faebd7b55"><div class="inline-span" xvid="ca5635a4e4de332d7dc3036a68e57009" class="wrapped manual-map" data-fact="619959c0062c677faebd7b57">November 1, 2021</div></div>');
                $("#append").empty().append(htmlData);

                alert(htmlData);
            } else {
                $("#append").empty().append(htmlData);
            }
        }
    </script>
</head>
<body>
    <div id="append"></div>
    <button>Click me to Replace!!</button>
</body>
</html>

uj5u.com熱心網友回復：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script> var htmlData = `<p style="font: 10pt Times New Roman, Times, Serif; margin: 0pt 0;" xvid="f5ea22ec52553bc61525766b631e126f">
  <span xvid="2b80c95cd4b851345ba4c3fe6937d30b" conceptid="619959bc062c677faebd7a6f" xbrlid="rr:ProspectusDate"  data-fact="619959c0062c677faebd7b55">
    <span xvid="ca5635a4e4de332d7dc3036a68e57009"  data-fact="619959c0062c677faebd7b57">November 1, 2021</span>
  </span>
</p>
`
console.log(replaceTags(htmlData, "span span[data-fact]","div"));

//a very handy function from Matt Basta to rplace tag names cannot be done on the fly without such functions
 function replaceElement(source, newType) { 
    // Create the document fragment 
    const frag = document.createDocumentFragment(); 
    // Fill it with what's in the source element 
    while (source.firstChild) { 
      frag.appendChild(source.firstChild); 
    } 
    // Create the new element 
    const newElem = document.createElement(newType); 
    // Empty the document fragment into it 
    newElem.appendChild(frag); 
    // Replace the source element with the new element on the page 
    source.parentNode.replaceChild(newElem, source); 
  }
//we now use our function as warper on above function.
function replaceTags (htmlData,whatToChange,withWhat) {
var fragment = document.createElement('just');
  fragment.innerHTML=htmlData;
  var found = fragment.querySelector(whatToChange);
  if(found){
replaceElement(fragment.querySelector(whatToChange), withWhat);} 
return fragment.innerHTML;
        
   }
    
    </script>

在這里找到你想要的東西是更合乎邏輯的解決方案，它混合了一堆搜索邏輯來完成這項作業。不完美但很接近

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/377290.html

標籤：javascript html 查询

上一篇：執行完整javascript的問題

下一篇：使用JQuery總結輸入組