const htmlString = `<p style="text-indent: 2em; line-height: 1.6em; text-align: left;"><span style="color: #333333; font-size: 15px; text-shadow: none; letter-spacing: 2px; font-family: PingFangSC-light;">美好，是能与时间抗衡的东西，虽然城市一直演奏着激进的主旋律，但家的筑成从不该是一场追赶时间的游戏，大到产品形态的雕琢，小到砖石草木的叠砌栽植生活的温度，皆来自于国匠品质对于产品的点滴打造。<img style="vertical-align: inherit; width: 100%; height: auto !important;" src="https://img.0557fdc.com/images/news/2023/6/13/202306136488250b58c12.jpeg" /></span></p>
<p style="text-align: right; text-indent: 2em; line-height: 1.6em;"><span style="line-height: 1.5em; color: #333333; text-shadow: none; letter-spacing: 2px; font-size: 12px; font-family: 微软雅黑, 'Microsoft YaHei';">（实拍图）</span></p>
<p style="line-height: 1.6em; text-indent: 2em; text-align: left;"><span style="font-size: 16px; font-family: 微软雅黑;"><span style="color: #333333; font-size: 15px; text-shadow: none; letter-spacing: 2px; font-family: PingFangSC-light;">一座建筑不仅是人们的活动空间，更是建造者对美好的寄予和憧憬，一座有温度的建筑，才能打磨出更温暖的生活。在对建筑夜以继日的打磨完善中，家的模样慢慢成型。让业主对住房品质放心，近距离看到住房的施工过程，5月15日，埇贤悦府举办“国匠质造 预鉴美好”业主开放日活动，国匠美好家境与业主自信相见。<img style="vertical-align: inherit; width: 100%; height: auto !important;" src="https://img.0557fdc.com/images/news/2023/6/13/202306136488250c0ec83.jpeg" /></span></span></p>
<p style="text-align: right; line-height: 1.6em; text-indent: 2em;"><span style="line-height: 1.5em; color: #333333; text-shadow: none; letter-spacing: 2px; font-size: 12px; font-family: 微软雅黑, 'Microsoft YaHei';">（实拍图）</span></p>
<section>
<section style="margin: 10px auto; text-align: center;">
<section style="display: flex; justify-content: center; align-items: center;">
<section style="font-size: 16px; letter-spacing: 1.5px; padding: 4px 1em; color: #ffffff; background: #d62d26;"><span style="font-size: 17px;"><strong>国匠敬呈</strong></span></section>
<section style="font-size: 16px; letter-spacing: 1.5px; padding: 4px 1em; color: #333333;"><span style="font-size: 17px;"><strong>匠心佳品</strong></span></section>
</section>
</section>
</section>
<p style="line-height: 1.6em; text-indent: 2em; text-align: left;"><span style="color: #333333; font-size: 15px; text-shadow: none; letter-spacing: 2px; font-family: PingFangSC-light;">对业主的开放，就像是一场考试，是检验工程品质的重要时刻，更是客户对产品满意度的重大考验。面对每一个业主提出的问题，工程师耐心的解答疑惑。通过本次工地开放日活动的开展，加强了与业主的联系。在工作人员的引导下，业主近距离对施工现场进行全方位的了解，亲自“鉴”证埇贤悦府的建筑细节。<img style="vertical-align: inherit; width: 100%; height: auto !important;" src="https://img.0557fdc.com/images/news/2023/6/13/202306136488250cbff64.jpeg" /></span></p>
<p style="text-align: right; text-indent: 2em; line-height: 1.6em;"><span style="line-height: 1.5em; color: #333333; text-shadow: none; letter-spacing: 2px; font-size: 12px; font-family: 微软雅黑, 'Microsoft YaHei';">（实拍图）</span></p>
<p style="line-height: 1.6em; text-indent: 2em; text-align: left;"><span style="color: #333333; font-size: 15px; text-shadow: none; letter-spacing: 2px; font-family: PingFangSC-light;">进入工地之前，为保证家人的安全及身份的认证，工作人员为每一位到场的家人都佩戴好安全帽，贴好臂章，由本人签字后，由专业工程人员带领家人分组参观，分享埇贤悦府营造的工艺品质。整洁的路面，简约大气的工地围挡区赫然在目；两边排列整齐的是安全施工的标准化设备，让人感觉到施工现场的规范化、标准化、精细化。<img style="vertical-align: inherit; width: 100%; height: auto !important;" src="https://img.0557fdc.com/images/news/2023/6/13/202306136488250d69655.jpeg" /><img style="vertical-align: inherit; width: 100%; height: auto !important;" src="https://img.0557fdc.com/images/news/2023/6/13/202306136488250dd86b1.jpeg" /><img style="vertical-align: inherit; width: 100%; height: auto !important;" src="https://img.0557fdc.com/images/news/2023/6/13/202306136488250e826d1.jpeg" /><img style="vertical-align: inherit; width: 100%; height: auto !important;" src="https://img.0557fdc.com/images/news/2023/6/13/202306136488250f2b460.jpeg" /></span></p>
<p style="text-align: right;"><span style="font-size: 12px;">（实拍图）</span></p>
<section>
<section style="margin: 10px auto; text-align: center;">
<section style="display: flex; justify-content: center; align-items: center;">
<section style="font-size: 16px; letter-spacing: 1.5px; padding: 4px 1em; color: #ffffff; background: #d62d26;"><span style="font-size: 17px;"><strong>精心匠造</strong></span></section>
<section style="font-size: 16px; letter-spacing: 1.5px; padding: 4px 1em; color: #333333;"><span style="font-size: 17px;"><strong>国匠品质渗透点滴</strong></span></section>
</section>
</section>
</section>
<p style="line-height: 1.6em; text-indent: 2em; text-align: left;"><span style="color: #333333; font-size: 15px; text-shadow: none; letter-spacing: 2px; font-family: PingFangSC-light;">用匠心去建造品质品味兼具的时代建筑，努力不是一时耀眼的光芒，是不断前行的坚实力量，6大类质量内控标准，在各个细节中体现，在看不见的地方施以匠心，成为工程质量最有力的保障，怀揣对美好的向往及对生活的精心构建，埇贤悦府致力于以细致入微、公开透明的理念向客户呈现家的每一个足迹，在专业工程师的专业讲解下，业主化身品质鉴证官，清晰地了解项目建筑成型的点点滴滴。<img style="vertical-align: inherit; width: 100%; height: auto !important;" src="https://img.0557fdc.com/images/news/2023/6/13/202306136488250fa5023.jpeg" /></span></p>
<p style="text-align: right; text-indent: 2em; line-height: 1.6em;"><span style="line-height: 1.5em; color: #333333; text-shadow: none; letter-spacing: 2px; font-size: 12px; font-family: 微软雅黑, 'Microsoft YaHei';">（实拍图）</span></p>
<p style="text-indent: 2em; line-height: 1.6em; text-align: left;"><span style="color: #333333; font-size: 15px; text-shadow: none; letter-spacing: 2px; font-family: PingFangSC-light;">以客户视角考量细节，精益求精提升品质，不论是选材用料还是工艺设计，始终以高标准、高要求严格把控，从项目工程施工、乃至工程质量监管，以眼鉴为实的品质营造，让埇贤悦府的美好愈加值得期待。</span><img style="vertical-align: inherit; width: 100%; height: auto !important;" src="https://img.0557fdc.com/images/news/2023/6/13/2023061364882510499c0.jpeg" /><img style="vertical-align: inherit; width: 100%; height: auto !important;" src="https://img.0557fdc.com/images/news/2023/6/13/2023061364882510eadbd.jpeg" /></p>
<p style="text-align: right;"><span style="font-size: 12px; letter-spacing: normal; line-height: 1.5em;">（实拍图）</span></p>
<p style="text-align: left; line-height: 1.6em; text-indent: 2em;"><span style="color: #333333; font-size: 15px; text-shadow: none; letter-spacing: 2px; font-family: PingFangSC-light;">对业主们的开放不仅是对于家的提前预演，更是美好心交付重要的一环。卓越的品质、精研考究的细节，埇贤悦府用细致入微的服务力以及高质的国匠品牌力，让每一位业主家人都能感受到来自家的温暖，也让业主们对品质有了全新的定义。从一纸蓝图到归家可期，我们将始终以品质为本，用经得起时间考验的作品践行美好生活的落地，持续为您提供美好未来，不负每一位业主家人的认可。</span><img style="caret-color: red; vertical-align: inherit; width: 100%; height: auto !important;" src="https://img.0557fdc.com/images/news/2023/6/13/202306136488251196fd1.jpeg" /><img style="vertical-align: inherit; width: 100%; height: auto !important;" src="https://img.0557fdc.com/images/news/2023/6/13/2023061364882512bd8f9.jpeg" /></p>
<p style="text-align: right; line-height: 1.6em; text-indent: 2em;"><span style="font-size: 12px; letter-spacing: normal; line-height: 1.5em;">（实拍图）</span></p>
<p style="text-align: center; line-height: 1.6em;"><span style="color: #333333; font-size: 15px; text-shadow: none; letter-spacing: 2px; font-family: PingFangSC-light;">埇贤悦府建筑面积约105-136㎡观景阔府</span></p>
<p style="text-align: center; line-height: 1.6em;"><span style="color: #333333; font-size: 15px; text-shadow: none; letter-spacing: 2px; font-family: PingFangSC-light;">全城火爆热销中 欲购从速！</span><img style="caret-color: red; color: #333333; font-size: 15px; letter-spacing: 2px; text-indent: 2em; vertical-align: inherit; width: 100%; font-family: PingFangSC-light; height: auto !important;" src="https://img.0557fdc.com/images/news/2023/6/13/20230613648825145666f.jpeg" /></p>
<section>
<p style="text-align: justify; color: #333333; vertical-align: inherit; line-height: 1.6em; font-family: mp-quote, -apple-system-font, BlinkMacSystemFont, Arial, sans-serif;"><strong><span style="letter-spacing: 2px; font-size: 16px; font-family: PingFangSC-light;"><strong style="max-inline-size: 100%; cursor: text; font-size: 17px; caret-color: red; text-indent: 2em; font-family: mp-quote, -apple-system-font, BlinkMacSystemFont, Arial, sans-serif; outline: none 0px !important;"><span style="max-inline-size: 100%; cursor: text; font-size: 16px; font-family: PingFangSC-light; outline: none 0px !important;">销售热线：</span></strong><strong style="max-inline-size: 100%; cursor: text; font-size: 17px; caret-color: red; text-indent: 2em; font-family: mp-quote, -apple-system-font, BlinkMacSystemFont, Arial, sans-serif; outline: none 0px !important;"><span style="max-inline-size: 100%; cursor: text; font-size: 16px; font-family: PingFangSC-light; outline: none 0px !important;">0557-3287777</span></strong></span></strong></p>
<p style="text-align: justify; color: #333333; vertical-align: inherit; line-height: 1.6em; font-family: mp-quote, -apple-system-font, BlinkMacSystemFont, Arial, sans-serif;"><strong><span style="letter-spacing: 2px; font-size: 16px; font-family: PingFangSC-light;">项目地址：</span></strong><strong><span style="letter-spacing: 2px; font-size: 16px; font-family: PingFangSC-light;">新丰路与银河五路交汇处</span></strong></p>
<p style="text-align: justify; color: #333333; vertical-align: inherit; line-height: 1.6em; font-family: mp-quote, -apple-system-font, BlinkMacSystemFont, Arial, sans-serif;"><span style="line-height: 18px; letter-spacing: 2px; font-size: 9px;">免责：本资料仅为要约邀请，所示</span><span style="line-height: 18px; letter-spacing: 2px; font-size: 9px;">图片及文字仅供参考</span><span style="line-height: 18px; letter-spacing: 2px; font-size: 9px;">，不作为销售与合同附件买卖双方的权利与义务，最终以政府批文</span><span style="line-height: 18px; letter-spacing: 2px; font-size: 9px;">及双方签署的商品房买卖合同约定为准。</span></p>
</section>`
function formatHTML(html) {
try {
// 创建一个临时div，以便进行处理
const tempDiv = document.createElement('div')
tempDiv.innerHTML = html
// 获取所有元素
const elements = tempDiv.querySelectorAll('*');
for (let i = 0; i < elements.length; i++) {
const currentEle = elements[i];
// 清除HTML元素上的所有class/id属性
currentEle.removeAttribute('class');
currentEle.removeAttribute('id');
// 清除HTML元素上的所有data属性
const dataAttrs = currentEle.dataset;
for (let prop in dataAttrs) {
if (dataAttrs.hasOwnProperty(prop)) {
delete dataAttrs[prop];
}
}
// 清除内联CSS背景图片代码
const imagePatterns = /background-image:\s*?url\(.*?\)/gi
if (currentEle.style.backgroundImage) {
// currentEle.style.backgroundImage = currentEle.style.backgroundImage.replace(imagePatterns, '')
currentEle.style.backgroundImage = ''
}
}
// 处理section元素
// const sectionElements = tempDiv.getElementsByTagName('section');
// for (let i = 0; i < sectionElements.length; i++) {
// const currentSection = sectionElements[i];
// // 将section标签display属性改为block
// currentSection.style.display = 'block'
// }
// 处理P元素
// 去除仅包含 的 p 元素
const pElements = tempDiv.getElementsByTagName('p');
// 遍历所有p元素
for (let i = 0; i < pElements.length; i++) {
const currentP = pElements[i];
// 将P标签lineHeight属性改为2
currentP.style.lineHeight = '2'
currentP.style.marginBlockStart = '1em'
currentP.style.marginBlockEnd = '1em'
// 检查p元素是否仅包含
if (currentP.innerHTML === ' ' || currentP.innerHTML === '<br>') {
// 如果是，则删除该元素
currentP.remove();
}
}
// 处理重复嵌套标签
let tag = tempDiv.querySelector('*')
while (tag) {
if (tag.children.length === 1 && tag.tagName === tag.children[0].tagName) {
tag.innerHTML = tag.children[0].innerHTML
}
tag = tag.nextElementSibling
}
// 清除不含任何子元素以及只包含空格的非图片元素
const emptyElements = tempDiv.querySelectorAll('*');
for (let i = 0; i < emptyElements.length; i++) {
const current = emptyElements[i];
if (current.tagName !== 'IMG' && current.childNodes.length === 0 && current.textContent.trim() === '') {
current.parentNode.removeChild(current);
}
}
// 非图片元素首行缩进2字符
// const nonImageElements = tempDiv.querySelectorAll('*:not(img)')
// for (let i = 0; i < nonImageElements.length; i++) {
// const nonImageElement = nonImageElements[i]
// nonImageElement.style.textIndent = '2em'
// }
// 处理图片
const imgElements = tempDiv.querySelectorAll('img');
for (let i = 0; i < imgElements.length; i++) {
const currentImg = imgElements[i];
// 获取图片原始宽度
const naturalWidth = currentImg.naturalWidth;
// 若原始宽度大于650
if (naturalWidth > 650) {
// 如果是，则修改内联CSS的宽度为650px
currentImg.style.width = '650px';
currentImg.style.height = 'auto';
} else {
// 如果不是，则修改内联CSS的宽度为原始宽度
currentImg.style.width = `${naturalWidth}px`;
currentImg.style.height = 'auto';
}
currentImg.style.display = 'block'
currentImg.style.margin = '10px auto 0'
currentImg.style.verticalAlign = ''
// 获取img元素的下一个兄弟元素
// const imgNextSibling = currentImg.nextSibling;
// // 检查兄弟元素是否存在并且是否为文本节点
// if (imgNextSibling && imgNextSibling.tagName === "IMG") {
// // 如果是，则设置兄弟元素的上边距为15px
// imgNextSibling.style.margin = '15px auto 0';
// }
}
return tempDiv.innerHTML
} catch (error) {
console.error('Error during HTML formatting:', error)
return html
}
}
const cleanedHtml = formatHTML(htmlString);
console.log(cleanedHtml); // <div>Some text</div>
console