用 TypeScript 实现元素高亮库的终极指南

2023-09-02 20:12:45

如何使用 JavaScript 高亮文本

简介

高亮文本是一种常见的交互效果，用于强调重要信息或引导用户操作。本文将介绍如何使用 JavaScript 实现高亮效果，并提供代码示例和自定义选项。

使用 Selection API 高亮

Selection API 提供了一种获取和操作选中文本的方法。我们可以使用它来包裹选中的文本，使其具有高亮样式。

// 获取选中文本
const selection = window.getSelection();

// 检查是否有选中文本
if (selection.rangeCount > 0) {
  // 创建一个带有高亮样式的元素
  const highlight = document.createElement("span");
  highlight.style.backgroundColor = "yellow";

  // 包裹选中的文本
  selection.getRangeAt(0).surroundContents(highlight);
}

使用 execCommand() 方法高亮

execCommand() 方法允许我们执行各种文本操作，包括插入 HTML。我们可以使用它来插入一个带有高亮样式的元素，从而实现高亮效果。

// 获取选中文本
const selection = window.getSelection();

// 检查是否有选中文本
if (selection.rangeCount > 0) {
  // 创建一个带有高亮样式的 HTML 元素
  const html = '<span style="background-color: yellow;">' + selection.toString() + '</span>';

  // 插入 HTML 元素
  document.execCommand("insertHTML", false, html);
}

自定义高亮样式

上面的代码提供了基本的黄色高亮效果。我们可以自定义高亮样式，以满足我们的特定需求。

// 创建一个带有自定义样式的元素
const highlight = document.createElement("span");
highlight.style.backgroundColor = "#ff0000";
highlight.style.color = "#ffffff";
highlight.style.padding = "2px";

// 包裹选中的文本
selection.getRangeAt(0).surroundContents(highlight);