从 DOM 片段中删除具有特定颜色的 <font>答案

【问题标题】：Remove <font> with specific color from DOM fragment从 DOM 片段中删除具有特定颜色的 <font>
【发布时间】：2026-01-25 16:30:02
【问题描述】：

这里是 DOM 片段

我正在使用：

var range = window.getSelection().getRangeAt(0);
var selectionContents = range.cloneContents();
console.log(selectionContents) // <-- it displays DOM fragment from selection.

我想删除<font color="#0000ff">&nbsp;Smith</font>。

我怎样才能做到这一点？

【问题讨论】：

您想完全删除它，还是直接解开它（即&nbsp; Smith 将从<font> 标签中移出）？
请不要贴图片，而是贴实际代码，方便复制。
@Terry : 我想完全删除带有color="#0000ff" 的字体
是只去掉颜色还是去掉整行
所以你想删除那个颜色的文本？比如如果这个词是彩色的#0000ff 然后删除这个词？

标签： javascript html

【解决方案1】：

如果您想删除具有#0000ff 的特定color 属性的<font> 元素，那么您可以简单地在selectionContents 节点中迭代地搜索该元素，然后如果它与您的匹配则删除该节点标准：

var fontEls = selectionContents.querySelectorAll('font');
fontEls.forEach(function(fontEl) {
  if (fontEl.color === '#0000ff')
    fontEl.remove();
});

请参阅下面的概念验证（并检查您的控制台）：

document.querySelector('button').addEventListener('click', function() {
  var range = window.getSelection().getRangeAt(0);
  var selectionContents = range.cloneContents();
  
  var fontEls = selectionContents.querySelectorAll('font');
  fontEls.forEach(function(fontEl) {
    if (fontEl.color === '#0000ff')
      fontEl.remove();
  });
  
  console.log(selectionContents);
});

<div>
  There, <b>Samuel<font color="#0000ff">&nbsp;Smith</font><font color="#ff0000">&nbsp;Smith</font><font color="#00ff00">&nbsp;Smith</font></b>
</div>
<button type="button">Get selection</button>

【讨论】：

非常感谢特里。我可以询问您对操作所选 DOM 的意见吗？从 *.com/questions/2139616/… ，我可以看到我可以提取选定的 DOM 但要追加我需要创建一个新的 div 并追加。我可以不简单地删除font 并附加结果。我不想每次都添加新的div
@Samuel 如果是这种情况，请在标记中创建 <div> 并给它一个 id，例如<div id="output">。每当您获取selectionContent 时，只需将#output 内部HTML 设置为它。这样你就不会每次都创建一个新元素。