Стилизация участков текста с помощью CSS Custom Highlight API

			const parentElement = document.getElementById("container");
const parent = parentElement.childNodes[0];
/* Нужно обязательно указывать .childNodes[0], чтобы работать именно с текстовым узлом, а не узлом-элементом */

const rangeOne = new Range();
/* Cоздание нового Range-объекта обязательно требует оператор new */
rangeOne.setStart(parent, 20);
/* Начало первого диапазона */
rangeOne.setEnd(parent, 30);
/* Конец первого диапазона */

const rangeTwo = new Range();
/* Создание второго диапазона */
rangeTwo.setStart(parent, 45);
/* Начало второго диапазона */
rangeTwo.setEnd(parent, 70);
/* Конец второго диапазона */

		

			const highlightFirst = new Highlight(rangeOne);
const highlightSecond = new Highlight(rangeTwo);
		

			const highlight = new Highlight(rangeOne, rangeTwo);
		

			CSS.highlights.set("user-1-highlight", highlightFirst );
CSS.highlights.set("user-2-highlight", highlightSecond );
		

			// Удаление выделения
CSS.highlights.delete("user-1-highlight");

// Очищение выделений
CSS.highlights.clear();
		

			::highlight(user-1-highlight) {
  background-color: #f06;
  color: white;
}


::highlight(user-2-highlight) {
  background-color: rgb(255, 255, 255);
  color: #f06;
}
		

			  <label>Search within text <input id="search" type="text" /></label>
  <article>
    <p>
      One sector that has felt this tidal wave of digital transformation particularly acutely is the retail industry. The
      emergence of e-commerce platforms and the revolution that is online shopping have caused tumultuous ripple effects on
      traditional brick-and-mortar stores. These traditional retailers have seen the race to online marketplaces as a survival
      requirement in today's digital economy. The immediacy of this requirement for change has propelled brick-and-mortar
      shops into developing robust web platforms and mobile applications to maintain their relevance in the industry.
      Moreover, to truly achieve a competitive edge, these businesses have begun to explore, understand, and utilize the
      environs of digital marketing and advertising. As they closely monitor consumer preferences and their growing demand for
      convenience and instant gratification, these retailers are pushed to adapt their delivery systems by integrating digital
      automation and strategic scaling plans.
      One sector that has felt this tidal wave of digital transformation particularly acutely is the retail industry. The
      emergence of e-commerce platforms and the revolution that is online shopping have caused tumultuous ripple effects on
      traditional brick-and-mortar stores. These traditional retailers have seen the race to online marketplaces as a survival
      requirement in today's digital economy. The immediacy of this requirement for change has propelled brick-and-mortar
      shops into developing robust web platforms and mobile applications to maintain their relevance in the industry.
      Moreover, to truly achieve a competitive edge, these businesses have begun to explore, understand, and utilize the
      environs of digital marketing and advertising. As they closely monitor consumer preferences and their growing demand for
      convenience and instant gratification, these retailers are pushed to adapt their delivery systems by integrating digital
      automation and strategic scaling plans.
    </p>
    <p>
      The concept of digital transformation represents a phenomenon that now pervades various industry sectors worldwide. It
      has become more of an imperative requirement than a flexible preference. This transformation process has been triggered
      by an accelerated influx of innovative technologies and data-driven strategies, thrusting businesses into a new era of
      operational and strategic methodology. In the face of this technological disruption, businesses across the globe are
      confronted with the ongoing challenge of reimagining their traditionally established practices and identifying ways to
      integrally embed digital methods into their core operations. Both the introduction and reach of novel digital tools have
      imprinted a necessity of change onto the very fabric of global industries, thereby instigating a serious reevaluation of
      previous business models and strategies.
      The concept of digital transformation represents a phenomenon that now pervades various industry sectors worldwide. It
      has become more of an imperative requirement than a flexible preference. This transformation process has been triggered
      by an accelerated influx of innovative technologies and data-driven strategies, thrusting businesses into a new era of
      operational and strategic methodology. In the face of this technological disruption, businesses across the globe are
      confronted with the ongoing challenge of reimagining their traditionally established practices and identifying ways to
      integrally embed digital methods into their core operations. Both the introduction and reach of novel digital tools have
      imprinted a necessity of change onto the very fabric of global industries, thereby instigating a serious reevaluation of
      previous business models and strategies.
    </p>
    <p>
      However, digital transformation is not a process that simply involves the superficial overlay of new technologies onto
      existing systems. It represents a more profound shift that must originate from within the organization itself - a
      cultural metamorphosis that encourages change, curiosity, and constant challenges to the status quo. The process
      requires businesses to create an environment of continuous learning and innovation, where employees feel comfortable
      adapting to and growing alongside technological advancements. This ongoing, employee-focused digitization effort is a
      critical component of the broader transformation agenda. This internal digital transformation must harmoniously coexist
      with the external technological advancements to truly harness the potential of digital technology and data-driven
      decision making. Ultimately, for a successful digital transformation journey, it is vital to hold not just the
      appropriate tech tools, but also to nourish the right organizational mindset.
      However, digital transformation is not a process that simply involves the superficial overlay of new technologies onto
      existing systems. It represents a more profound shift that must originate from within the organization itself - a
      cultural metamorphosis that encourages change, curiosity, and constant challenges to the status quo. The process
      requires businesses to create an environment of continuous learning and innovation, where employees feel comfortable
      adapting to and growing alongside technological advancements. This ongoing, employee-focused digitization effort is a
      critical component of the broader transformation agenda. This internal digital transformation must harmoniously coexist
      with the external technological advancements to truly harness the potential of digital technology and data-driven
      decision making. Ultimately, for a successful digital transformation journey, it is vital to hold not just the
      appropriate tech tools, but also to nourish the right organizational mindset.
    </p>
  </article>
  

		

			// Получаем ссылку на элемент с идентификатором "search"
const search = document.getElementById("search");
// Получаем ссылку на первый элемент  на странице
const article = document.querySelector("article");


// Находим все текстовые узлы внутри элемента, с которыми будем работать
const treeWalker = document.createTreeWalker(article, NodeFilter.SHOW_TEXT);
const allTextNodes = [];
let currentNode = treeWalker.nextNode();
while (currentNode) {
  allTextNodes.push(currentNode);
  currentNode = treeWalker.nextNode();
}


// Слушаем событие ввода текста в поле поиска
search.addEventListener("input", () => {
  // Если CSS Custom Highlight API не поддерживается в браузере,
  // выводим сообщение и выходим из обработчика
  if (!CSS.highlights) {
    article.textContent = "CSS Custom Highlight API not supported.";
    return;
  }


  // Очищаем реестр выделений, чтобы удалить предыдущие результаты поиска
  CSS.highlights.clear();


  // Очищаем поисковый запрос и выходим, если он пустой
  const str = search.value.trim().toLowerCase();
  if (!str) {
    return;
  }


  // Итерируем по всем текстовым узлам и находим совпадения
  const ranges = allTextNodes
    .map((el) => {
      // Преобразуем текст текущего узла к нижнему регистру для регистронезависимого поиска
      return { el, text: el.textContent.toLowerCase() };
    })
    .map(({ text, el }) => {
      const indices = [];
      let startPos = 0;
      while (startPos < text.length) {
        // Находим индексы всех вхождений строки в тексте текущего узла
        const index = text.indexOf(str, startPos);
        if (index === -1) break;
        indices.push(index);
        startPos = index + str.length;
      }


      // Создаём объекты диапазонов для каждого найденного совпадения
      return indices.map((index) => {
        const range = new Range();
        range.setStart(el, index);
        range.setEnd(el, index + str.length);
        return range;
      });
    });


  // Создаём объект выделения для найденных диапазонов
  const searchResultsHighlight = new Highlight(...ranges.flat());


  // Регистрируем созданный объект выделения в реестре
  CSS.highlights.set("search-results", searchResultsHighlight);
});
		

			::highlight(search-results) {
  background-color: #f06;
  color: white;
}