我经常使用一个网站,其中某些页面错误地包含单数 <b/>
,导致以下所有文本均为粗体。我正在尝试编写一个用户脚本来解决这个问题,但以下 JS 代码不起作用:
document.body.innerHTML = document.body.innerHTML.replace(/<b\/>/g, '')
为什么?
最佳答案
一个很好且安全的方法是:
document.querySelectorAll('b').forEach(b => {
// const parent = b.parentNode;
const fragment = document.createDocumentFragment();
fragment.append(...b.childNodes);
b.replaceWith(fragment);
// (optional) to join consecutive textNodes
// parent.normalize();
});
setTimeout(() => {
document.querySelectorAll('b').forEach(b => {
const parent = b.parentNode;
fragment = document.createDocumentFragment();
fragment.append(...b.childNodes);
b.replaceWith(fragment);
parent.normalize();
});
}, 1000);
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque posuere neque, ac consectetur turpis porta vel. Nullam consequat mauris quis lectus porttitor, id vehicula lorem maximus. Nunc laoreet velit nisl. Nunc sit amet nulla egestas, <b>tincidunt magna sed, hendrerit ante.</b> Vestibulum elementum porttitor nisi quis commodo. Morbi gravida odio a eros pretium, at sagittis velit iaculis. Ut quis eleifend tortor. Etiam consectetur congue tempor. Pellentesque vel gravida velit. Maecenas quis urna ante. Morbi vel tellus eros.
</p>
<p>
Nulla scelerisque vitae lacus quis consequat. Donec volutpat efficitur diam non lobortis. Donec porttitor in lorem vitae iaculis. Suspendisse eu ligula a arcu ultrices scelerisque vitae at lacus. Fusce sodales, nunc ac tincidunt dignissim, velit felis pellentesque odio, ac mattis orci eros molestie est. Aliquam euismod cursus sem, nec convallis libero aliquam vel. Aliquam ut velit ornare risus sollicitudin convallis. <b>Etiam massa sem, facilisis vel hendrerit vitae, <b>dignissim fermentum nulla.</b> Nullam pellentesque ipsum eu egestas convallis.</b> Maecenas scelerisque vitae nisl at tempor. Etiam eu egestas nibh. Phasellus vitae consectetur velit, sed fringilla metus. Nunc vitae pellentesque arcu. Nullam eget felis id ligula molestie placerat. Aliquam gravida pulvinar posuere. Nullam non purus consequat, volutpat enim eu, convallis ante.
</p>
<p>
<b>Quisque egestas</b> enim sed felis scelerisque ultrices. Proin id justo vitae ante volutpat tristique a nec metus. Vivamus quis scelerisque nunc, vitae dictum nunc. Vestibulum ultrices sem sit amet facilisis ornare. Sed tellus libero, vestibulum molestie ultricies a, cursus a nisi. Suspendisse potenti. Vestibulum sed ante tortor. Suspendisse eu sem quis velit aliquam tempus. Vivamus eget vulputate est, nec fermentum sem. Suspendisse potenti. In nunc ante, tincidunt ut nunc id, tempor aliquam mi. Vestibulum dictum, mi sed tempus commodo, ex turpis aliquam felis, suscipit aliquet leo eros tempor nisi. Donec et suscipit risus. Proin vestibulum felis interdum tellus luctus, nec tempus turpis cursus. Curabitur lectus nibh, scelerisque ut magna sed, aliquet mollis risus. Sed pulvinar, felis at sodales porta, enim neque rhoncus nulla, eget ornare odio lectus facilisis dolor.
</p>
为了支持 ES5(不知道为什么此时需要这样做),这里有一个更详细的替代方案,但也比上面的更有效:
var nodes = document.getElementsByTagName('b');
for (var i = 0; i < nodes.length; i++) {
var b = nodes[i];
var parent = b.parentNode;
var fragment = document.createDocumentFragment();
for (var j = 0; j < b.childNodes.length; j++) {
fragment.appendChild(b.childNodes[j]);
}
parent.replaceChild(fragment, b);
// check for DOM level 2 support
if (typeof parent.normalize === 'function') {
// this step is not required
// just re-optimizes DOM layout
parent.normalize();
}
}
参见:
关于javascript - 使用用户脚本删除 ‘<b/>’,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48591295/