时间戳

首页 > 解决方案 > 单击单词时更改文本颜色

javascript - 单击单词时更改文本颜色

问题描述

我正在尝试创建一个应用程序，用户可以在单击（或双击）特定单词时突出显示该特定单词。也就是说，用户可以点击文章中任何段落中的任何单词，并通过更改其背景颜色或更改其字体颜色来突出显示它。

不过，我遇到了麻烦，弄清楚如何做到这一点。我不想突出显示整个段落，也不想将每个单词包装在一个独特的组件或 html 标记中。我基本上想要的是整篇文章的包装组件，它只记录被点击的特定单词，然后让我决定我想要更改的那个单词的 css 属性（例如背景颜色或文本颜色）。

但我无法弄清楚如何做到这一点。有没有一个图书馆已经这样做了。如果没有，我怎样才能将文章作为一个整体包装，但可以访问被点击的单数词？

对于它的价值，我正在使用 React 创建应用程序。

标签： javascripthtmlcssreactjsreact-component

解决方案

您可以使用此方法访问页面中的选定文本：

window.getSelection()

现在我们可以编辑页面中的任何选定文本，如下所示：

window.getSelection().anchorNode.parentElement.innerHTML =
window.getSelection().anchorNode.parentElement.innerHTML.replace(
  window.getSelection().toString() ,
    "<b>" +
    window.getSelection().toString() +
    "</b>"
  )

此代码使所选文本变粗以更改颜色或突出显示您可以尝试以下操作：

  window.getSelection().anchorNode.parentElement.innerHTML =
    window.getSelection().anchorNode.parentElement.innerHTML.replace(
      window.getSelection().toString() ,
        "<span style='color:red;'>" +
        window.getSelection().toString() +
        "</span>"
      )

希望有用:)

推荐阅读