В JavaScript отслеживание изменений выделения в документе может быть важно для различных интерактивных приложений. Одним из распространенных сценариев является ситуация, когда вам необходимо зафиксировать предыдущее значение выделенного фрагмента при его изменении. В этой статье мы рассмотрим несколько методов и приведем примеры кода для выполнения этой задачи.

Метод 1. Использование события onselectionchange:
Событие onselectionchangeсрабатывает, когда выбор пользователя изменяется в документе. Чтобы сохранить старое значение, вы можете сохранить предыдущий выбор в переменной и обновлять его при каждом запуске события.

let previousSelection;
document.addEventListener("selectionchange", () => {
  const currentSelection = document.getSelection();
  // Check if there was a previous selection
  if (previousSelection) {
    // Process the old value as needed
    console.log("Previous selection:", previousSelection.toString());
  }
// Update the previous selection
  previousSelection = currentSelection;
});

Метод 2. Использование API выбора.
API выбора предоставляет методы и свойства для управления и получения информации о выборе пользователя. Объединив его с прослушивателями событий, вы можете отслеживать изменения выбора и извлекать старое значение.

let previousSelection;
document.addEventListener("selectionchange", () => {
  const currentSelection = window.getSelection();
  // Check if there was a previous selection
  if (previousSelection && !previousSelection.isCollapsed) {
    // Process the old value as needed
    console.log("Previous selection:", previousSelection.toString());
  }
// Update the previous selection
  previousSelection = currentSelection;
});

Метод 3: сравнение диапазонов выбора.
Другой подход заключается в сравнении диапазона текущего выбора с диапазоном предыдущего выбора. Если диапазоны разные, вы можете извлечь старое значение.

let previousSelection;
document.addEventListener("selectionchange", () => {
  const currentSelection = window.getSelection();
  // Check if there was a previous selection
  if (
    previousSelection &&
    (previousSelection.anchorOffset !== currentSelection.anchorOffset ||
      previousSelection.focusOffset !== currentSelection.focusOffset)
  ) {
    // Process the old value as needed
    console.log("Previous selection:", previousSelection.toString());
  }
// Update the previous selection
  previousSelection = currentSelection;
});

Отслеживание изменений выбора в JavaScript имеет решающее значение для многих интерактивных приложений. Используя событие onselectionchangeи API выбора, вы можете легко сохранить старое значение выбора. Независимо от того, решите ли вы сохранить предыдущий выбор в переменной или сравнить диапазоны выбора, эти методы позволят вам эффективно реагировать на изменения выбора.

Не забудьте обрабатывать изменения выбора соответствующим образом в зависимости от требований вашего приложения.