堆栈内存溢出
  繁体   English   中英

如何将嵌套跨度替换为 JQuery 中的 div 元素？

[英]How to replace nested span to div element in JQuery?

 原文  2021-12-08 10:45:20  6   3    javascript/ html/ jquery

问题描述

我正在尝试检查给定的htmlData是否具有属性名称data-fact的嵌套（父，子不是兄弟） span元素。

如果确实如此，则将其替换为span以div与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 class="inline-span" ');
            htmlData = htmlData.replace(/<\/span>/g, '<\/div>');
        }else{
            return htmlData;
        }
    },

我想要的 output 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

3 个解决方案

解决方案1
 2  2021-12-08 12:01:11

进行字符串替换以更改 HTML 通常是一个坏主意。 您应该改用 jquery 的工具来操作 DOM。 哪个更安全，更不容易出错。 

 // While there are still more span's in the p while ($('p span[data-fact]').length > 0) { // get the next span to replace with a div const $span = $($('p 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); } console.log($('p').html());
 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>

注意：在p中有div标签是无效的 HTML ，所以也应该替换p标签。

解决方案2
 0  2021-12-08 11:13:44

我做了一些与在 HTML 元素中查找和替换 jquery 代码相关的更改，这是一个工作演示，希望对您有所帮助。

您可以直接将所有 html 替换为

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

使用$factElem[0].outerHTML你可以找到包含[data-fact] html 的元素。 是的，您只能使用 data-fact 进行检查并将其替换为 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>

解决方案3
 0  2021-12-08 11:31:44

 <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" class="manual-map" data-fact="619959c0062c677faebd7b55"> <span xvid="ca5635a4e4de332d7dc3036a68e57009" class="wrapped manual-map" 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>

在这里了解您想要什么是更合乎逻辑的解决方案，它混合了一堆搜索逻辑来完成这项工作。 不完美，但很接近

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 JQuery 用 Div 替换 Span 如何用“ <span>”和“</span> ” jQuery替换“（”和“）” JQuery：如何从包含 span 元素的选择 div 元素中排除？ 将鼠标悬停在div上以显示jQuery的嵌套范围 如何更改<span>父</span>元素<span>内</span>子元素的CSS <div> <span>元素使用jQuery onclick事件吗？</span> 形成如何从范围获取div元素 如何获取嵌套跨度HTML元素的文本？ 我怎样才能更换一个<blockquote><span>与jquery？</span> 如何使用jQuery替换跨度内的文本 jQuery可拖动div中嵌套范围的z-index
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM