当前位置：首页 > JavaScript

js 实现标记

2026-03-14 10:50:25JavaScript

实现标记功能的方法

在JavaScript中实现标记功能通常涉及高亮文本、添加注释或标记特定元素。以下是几种常见场景的实现方式：

文本高亮标记

使用<mark>标签或CSS样式实现文本高亮：

// 使用<mark>标签包裹选中文本
function highlightText() {
  const selection = window.getSelection();
  if (selection.toString().length > 0) {
    const range = selection.getRangeAt(0);
    const mark = document.createElement("mark");
    range.surroundContents(mark);
  }
}

DOM元素标记

通过添加CSS类来标记页面元素：

function markElement(elementId) {
  const element = document.getElementById(elementId);
  element.classList.add('marked');
}

// CSS样式
.marked {
  border: 2px solid yellow;
  background-color: rgba(255,255,0,0.2);
}

数据标记

在数据对象中添加标记属性：

const data = [
  { id: 1, content: "Item 1", marked: false },
  { id: 2, content: "Item 2", marked: false }
];

function toggleMark(itemId) {
  const item = data.find(i => i.id === itemId);
  if (item) item.marked = !item.marked;
}

画布标记

在Canvas上实现绘图标记：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

function drawMarker(x, y) {
  ctx.beginPath();
  ctx.arc(x, y, 10, 0, 2 * Math.PI);
  ctx.fillStyle = 'red';
  ctx.fill();
}

持久化标记

使用localStorage保存标记状态：

function saveMarkState(elementId, isMarked) {
  localStorage.setItem(`marked_${elementId}`, isMarked);
}

function loadMarkState(elementId) {
  return localStorage.getItem(`marked_${elementId}`) === 'true';
}

第三方库实现

使用专门的标记库如Marker.js：

js 实现标记

import { MarkerArea } from 'markerjs2';

function startMarking(targetId) {
  const markerArea = new MarkerArea(document.getElementById(targetId));
  markerArea.show();
}

每种方法适用于不同场景，文本高亮适合文档内容标记，DOM元素标记适合页面元素突出显示，数据标记适合应用状态管理，画布标记适合图像标注，持久化方法可保存标记状态，第三方库提供更完整的标记解决方案。