javascript - 使用用户脚本删除 ‘<b/>’

标签 javascript regex

我经常使用一个网站,其中某些页面错误地包含单数 <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/

相关文章:

javascript - 此 JSON 响应出现错误

javascript - 无法将此主题与 preg_match 匹配

regex - Kibana 中的正则表达式问题

php - 处理 pinterest 中可变的图像尺寸,例如布局/加载

javascript - 在 Knockout 中使用下拉列表进行内联编辑

javascript - 如何将绝对定位的 div、相对的 div、绝对定位的 flexContainer 居中?

javascript - NG-重复具有重复值的对象,而不在输出上复制它,而不使用过滤器和外部依赖项

数字后跟点 (.) 的正则表达式

c# - 如何提取位于圆括号(圆括号)之间的文本?

r - 在 gregexpr 和 str_extract_all 函数中进行量化的交替