|
|
相关文章推荐
|
一身肌肉的乌龙茶 · PG时间处理 - 弦灬烨 - 博客园· 3 月前 · |
|
|
强悍的咖啡豆 · vba数组排序 字符串-掘金· 1 年前 · |
|
|
风流倜傥的杨桃 · 《SQL编程思想》第3章 逻辑处理功能 - 知乎· 1 年前 · |
如何在JQuery中将嵌套的span替换为div元素？
问
如何在JQuery中将嵌套的span替换为div元素？
EN
EN
Stack Overflow用户
提问于
2021-12-08 10:45:20
回答 3
查看 152
关注 0
票数 1
我试图检查给定的
htmlData
是否嵌套了属性名为
data-fact
的
span
元素(父元素、子元素而不是兄弟元素)。
如果它这样做了，那么用
span
替换为
div
，用
class='inline-span'
传递它的所有属性。否则只需返回
htmlData
代码语言：
javascript
复制
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>
replaceTags(htmlData)
代码语言：
javascript
复制
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;
},
我想要的输出
htmlData
是这样的
代码语言：
javascript
复制
<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>
</p>
在这里，我无法找到
span
元素是嵌套的还是不嵌套的，然后如何将
class='inline-span'
与前面的所有属性传递给
div
的转换。
PS:我想要的答案在JQuery里
EN
回答 3
Stack Overflow用户
回答已采纳
发布于 2021-12-08 12:01:11
进行字符串替换以更改HTML通常是个坏主意。相反，您应该使用jquery工具来操作DOM。这样更安全，更容易出错。
代码语言：
javascript
复制
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);
代码语言：
javascript
复制
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;
}
代码语言：
javascript
复制
<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>
注意:在
div
中使用
p
标记是无效的，因此可能也应该替换
p
标记。
票数 1
EN
Stack Overflow用户
发布于 2021-12-08 11:31:44
代码语言：
javascript
复制
<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>
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>
在这里得到您想要的是更符合逻辑的解决方案，它混合了大量的搜索逻辑来完成这项工作。不是完美，而是接近
票数 1
EN
Stack Overflow用户
发布于 2021-12-08 11:13:44
我做了一些与在HTML元素和替换jquery代码中找到相关的更改，这里是一个工作演示，希望它将对您有所帮助。
您可以直接将所有html替换为
代码语言：
javascript
复制
htmlData = htmlData.replace($factElem[0].outerHTML, 'div html');
使用
$factElem[0].outerHTML
，您可以找到包含
数据事实的
html的元素。是的，您可以只使用数据事实进行检查，并将其替换为div，因此不需要span。
我更新了密码，现在请检查。
代码语言：
javascript
复制
<!DOCTYPE html>
<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>
推荐文章
|
|
一身肌肉的乌龙茶 · PG时间处理 - 弦灬烨 - 博客园 3 月前 |
|
|
强悍的咖啡豆 · vba数组排序 字符串-掘金 1 年前 |
|
|
风流倜傥的杨桃 · 《SQL编程思想》第3章 逻辑处理功能 - 知乎 1 年前 |