如何让 JS 突出显示文本？

Posted 2023-03-06

【中文标题】如何让 JS 突出显示文本？

【英文标题】：How can I keep the text highlighted with JS?

【发布时间】：2021-11-12 07:37:11

【问题描述】：

我正在做一个概念项目。选择时突出显示文本。

一旦选中，我必须保持文本突出显示。

<div class="reveal" id="textToSelect"> 
    <span class="reveal-text">texttexttexttexttexttext</span>
    <span class="reveal-text">texttexttexttexttexttexttexttexttexttexttexttext</span>
    <span class="reveal-text">texttexttexttexttexttext</span>
    <span class="reveal-text">texttexttexttexttexttexttexttext</span>
    <span class="reveal-text">Ctexttexttexttexttexttexttexttexttext</span>
    <span class="reveal-text">texttexttexttexttexttexttexttext</span>
</div>

我使用 execommand 在选择时创建了一些带有背景颜色的跨度。它可以工作，但 execommand 现在已过时。

document.getElementById('textToSelect').addEventListener('mouseup', function() 
sel = window.getSelection();
if (sel.rangeCount && sel.getRangeAt) 
  range = sel.getRangeAt(0);


document.designMode = "on";
if (range) 
  sel.removeAllRanges();
  sel.addRange(range);


document.execCommand("hiliteColor", false, "red");

document.designMode = "off";
);

如何在没有 execCommand 的情况下创建这些跨度？我看到了答案，但对于这种特定情况来说可能太笼统了。

非常感谢您的支持！

【问题讨论】：

选择的意思是“点击”还是“鼠标上移”？

理想情况下，我想在范围的每一侧创建带有背景颜色的标签来模拟突出显示。

范围是多少？我没看懂那句话里的问题。当您将鼠标悬停在#textToSelect 上时，您需要突出显示内容文本吗？是吗？>

【参考方案1】：

鼠标悬停在#textToSelect 上时是否会出现以下预期行为？

#textToSelect .reveal-text 
  background-color: #ddd;
  cursor: pointer;


#textToSelect:hover .reveal-text 
  background-color: yellow;

<div class="reveal" id="textToSelect"> 
    <span class="reveal-text">texttexttexttexttexttext</span>
    <span class="reveal-text">texttexttexttexttexttexttexttexttexttexttexttext</span>
    <span class="reveal-text">texttexttexttexttexttext</span>
    <span class="reveal-text">texttexttexttexttexttexttexttext</span>
    <span class="reveal-text">Ctexttexttexttexttexttexttexttexttext</span>
    <span class="reveal-text">texttexttexttexttexttexttexttext</span>
</div>

【讨论】：

并非如此。我想根据选择在 .reveal-text 内创建其他跨度。例如，如果我有这个：Bonjour Monsieur comment allez-vous ？ 然后我强调“先生评论”。所以 DOM 会变成这样： Bonjour Monsieur comment allez-vous ？

【参考方案2】：

如果您需要在单击后更改颜色，则需要将其添加到您的显示文本类中，因此在您的 css 文件中添加：

a:active 
  color: red;

相应地改变颜色。