0

Поиск по странице, с выделением совпадений, аналогичный Ctrl+F в браузере. Но только он не начнет искать, пока не нажать кнопку. При чем её приходится нажимать для выделения каждого из совпадений. В общем, помогите пожалуйста его "оживить"

    superfind = function(){
        var surround = document.createElement('span');
        surround.style.background='#e9bd13';

        return function( str ){
            var sel = getSelection();        // получаем выделение
            sel.removeAllRanges();           // обнуляем его


            if(surround.hasChildNodes()){ //если ужк есть выделение
                sel.collapse(surround.nextSibling,0); // ставим в позицию конца предыдущего поиска, если есть (для новых поисков обнуление не предусмотрено)

                var temp = document.createDocumentFragment();
                while(surround.hasChildNodes()) temp.appendChild(surround.firstChild);
                surround.parentNode.replaceChild( temp,surround); //возвращаем как было (тут может быть баг при нахожении одного в другом)
            }

            while(sel.isCollapsed){ //ищем пока что-нибудь не найдёт в документе (а не в input)
                if(!find( str )){   //и пока документ не закончится
                      return false
                }
            }
            var range  = sel.getRangeAt(0); //получаем range
            range.surroundContents(surround); //оборачиваем найденное
            sel.collapse(surround,1);  //схлопываем выделение

            return true
        }
    }();
<input type="button" value="Найти" onclick="superfind(nextSibling.value)"/><input type="text" placeholder="Введите текст..."/>

 <p>Вот, надо тыкать кнопку, само не ищет :c</p>

<p>Система вопросов и ответов о программировании, разработанная Джоэлем Спольски и Джеффом Этвудом в 2008 году. Является частью Stack Exchange Network. Как и в других системах подобного рода, Stack Overflow предоставляет возможность оценивать вопросы и ответы, что поднимает или понижает репутацию зарегистрированных пользователей. Проект создан на C# с использованием ASP.NET 4 и ASP.NET MVC.</p>

<p>Система вопросов и ответов о программировании, разработанная Джоэлем Спольски и Джеффом Этвудом в 2008 году. Является частью Stack Exchange Network. Как и в других системах подобного рода, Stack Overflow предоставляет возможность оценивать вопросы и ответы, что поднимает или понижает репутацию зарегистрированных пользователей. Проект создан на C# с использованием ASP.NET 4 и ASP.NET MVC.</p>

<p>Система вопросов и ответов о программировании, разработанная Джоэлем Спольски и Джеффом Этвудом в 2008 году. Является частью Stack Exchange Network. Как и в других системах подобного рода, Stack Overflow предоставляет возможность оценивать вопросы и ответы, что поднимает или понижает репутацию зарегистрированных пользователей. Проект создан на C# с использованием ASP.NET 4 и ASP.NET MVC.</p>

<p>Система вопросов и ответов о программировании, разработанная Джоэлем Спольски и Джеффом Этвудом в 2008 году. Является частью Stack Exchange Network. Как и в других системах подобного рода, Stack Overflow предоставляет возможность оценивать вопросы и ответы, что поднимает или понижает репутацию зарегистрированных пользователей. Проект создан на C# с использованием ASP.NET 4 и ASP.NET MVC.</p>

P.S. Обновил весь код.

6
  • Идея ждать подгрузки json при помощи таймаута - наверное, годится для теста, но вообще это не очень хорошая идея. Как правило, при использовании чего то вроде axios можно повесить функцию на событие "окончание загрузки данных"
    – S.H.
    30 мар 2021 в 23:16
  • eval - это плохая идея 1 апр 2021 в 23:56
  • Выполняйте скрипт по onchange
    – asanisimov
    3 апр 2021 в 13:25
  • Для того и написал тут)) Я не знаю javascript, как собственно и любой другой ЯП. Знаю, что надо делать, знаю ещё про EventListener, нужно лишь что бы кто нибудь это в код правильно вставил) 3 апр 2021 в 13:50
  • 1
    <input type="text" placeholder="Введите текст..." oninput="superfind(this.value)" /> но в вашем случае оно вешает страницу
    – br3t
    4 апр 2021 в 11:37

1 ответ 1

3
+50

Могу предложить следующий несложный алгоритм поиска.

  • Перебираем все текстовые узлы-потомки некоторого узла-элемента (внутри которого и осуществляется поиск).
  • Если текстовый узел содержит искомый текст, то разбиваем узел на несколько текстовых узлов. Причём искомый текст формирует самостоятельный узел.
  • Оборачиваем текстовые узлы с искомым текстом в какой-нибудь тег, например, <span> с уникальным классом (для идентификации данных узлов).

При изменении поискового запроса первым делом удаляем все теги обёртки с заданным уникальным классом.

В общем, примерно так:

function textSearch() {
  function wrapTextInTextNode(textNode, searchText, wrapBlank) {
    let textContent = textNode.textContent;
    let lowerTextContent = textContent.toLocaleLowerCase();
    let resNodes = [];
    let beginIndex = 0;
    while (true) {
      let index = lowerTextContent.indexOf(searchText, beginIndex);
      if (index === -1)
        break;

      let prevText = textContent.slice(beginIndex, index);
      if (prevText.length > 0)
        resNodes.push(document.createTextNode(prevText));

      let elem = wrapBlank.cloneNode(false);
      elem.textContent = textContent.slice(index, index + searchText.length);
      resNodes.push(elem);

      beginIndex = index + searchText.length;
    }
    if (beginIndex === 0)
      return resNodes;
    let prevText = textContent.slice(beginIndex);
    if (prevText.length > 0)
      resNodes.push(document.createTextNode(prevText));
    return resNodes;
  }

  function wrapTextNodes(elementNode, searchText, wrapBlank) {
    let childNodes = Array.from(elementNode.childNodes);
    for (let child of childNodes)
      switch (child.nodeType) {
        case Node.TEXT_NODE:
          let nodesArr = wrapTextInTextNode(child, searchText, wrapBlank);
          if (nodesArr.length === 0)
            break;
          let prev = child;
          for (let node of nodesArr) {
            prev.after(node);
            prev = node;
          }
          child.remove();
          break;
        case Node.ELEMENT_NODE:
          wrapTextNodes(child, searchText, wrapBlank);
          break;
      }
  }

  function unwrapTextNodes(elementNode, wrapBlank) {
    let wrappedNodes = elementNode.querySelectorAll("." + wrapBlank.className);
    for (let i = 0; i < wrappedNodes.length; ++i) {
      let prevNode = wrappedNodes[i].previousSibling;
      let nextNode = wrappedNodes[i].nextSibling;

      let textNode = document.createTextNode(wrappedNodes[i].textContent);
      wrappedNodes[i].replaceWith(textNode);

      if (prevNode && prevNode.nodeType === Node.TEXT_NODE) {
        prevNode.textContent += textNode.textContent;
        textNode.remove();
        textNode = prevNode;
      }
      if (nextNode && nextNode.nodeType === Node.TEXT_NODE) {
        textNode.textContent += nextNode.textContent;
        nextNode.remove();
      }
    }
  }

  const wrapBlank = document.createElement("span"); //Заготовка для оборачивания результатов поиска
  wrapBlank.className = "found-result"; //Класс для идентификации результатов поиска.

  const searchBlock = document.getElementById("search-block");
  const controlInputText = document.getElementById("input-text");

  controlInputText.addEventListener("input", handlerInputText);
  handlerInputText();

  function handlerInputText() {
    unwrapTextNodes(searchBlock, wrapBlank);

    let searchText = controlInputText.value.trim().toLocaleLowerCase();
    if (searchText.length > 0) {
      wrapTextNodes(searchBlock, searchText, wrapBlank);
    }
  }
}

textSearch();
.found-result {
  background-color: lime;
}
<p><input type="text" id="input-text"></p>

<div id="search-block">
  <p>Вот, надо тыкать кнопку, само не ищет :c</p>

  <p>Система вопросов и ответов о программировании, разработанная Джоэлем Спольски и Джеффом Этвудом в 2008 году. Является частью Stack Exchange Network. Как и в других системах подобного рода, Stack Overflow предоставляет возможность оценивать вопросы и
    ответы, что поднимает или понижает репутацию зарегистрированных пользователей. Проект создан на C# с использованием ASP.NET 4 и ASP.NET MVC.</p>

  <p>Система вопросов и ответов о программировании, разработанная Джоэлем Спольски и Джеффом Этвудом в 2008 году. Является частью Stack Exchange Network. Как и в других системах подобного рода, Stack Overflow предоставляет возможность оценивать вопросы и
    ответы, что поднимает или понижает репутацию зарегистрированных пользователей. Проект создан на C# с использованием ASP.NET 4 и ASP.NET MVC.</p>

  <p>Система вопросов и ответов о программировании, разработанная Джоэлем Спольски и Джеффом Этвудом в 2008 году. Является частью Stack Exchange Network. Как и в других системах подобного рода, Stack Overflow предоставляет возможность оценивать вопросы и
    ответы, что поднимает или понижает репутацию зарегистрированных пользователей. Проект создан на C# с использованием ASP.NET 4 и ASP.NET MVC.</p>

  <p>Система вопросов и ответов о программировании, разработанная Джоэлем Спольски и Джеффом Этвудом в 2008 году. Является частью Stack Exchange Network. Как и в других системах подобного рода, Stack Overflow предоставляет возможность оценивать вопросы и
    ответы, что поднимает или понижает репутацию зарегистрированных пользователей. Проект создан на C# с использованием ASP.NET 4 и ASP.NET MVC.</p>
</div>

Из недостатков данного подхода, в первую очередь, можно отметить:

  • Если искомый текст принадлежит нескольким текстовым узлам, то он не будет найден. Например, текст тест не будет найден в такой разметке <p>те<strong>с</strong>т</p>.
  • Если по какой-то причине есть пара текстовых узлов, являющихся детьми одного и того же родителя и при этом один из узлов следует непосредственно за другим, то в некоторых ситуациях функция unwrapTextNodes будет объединять их в единый текстовый узел.

Усложнённый вариант поиска с отдельной подсветкой «текущего местоположения», автоматической прокруткой страницы и продолжением поиска с позиции, по которой был произведён щелчок мыши.

function textSearch() {
  function wrapTextInTextNode(textNode, searchText, wrapBlank) {
    let textContent = textNode.textContent;
    let lowerTextContent = textContent.toLocaleLowerCase();
    let resNodes = [];
    let beginIndex = 0;
    while (true) {
      let index = lowerTextContent.indexOf(searchText, beginIndex);
      if (index === -1)
        break;

      let prevText = textContent.slice(beginIndex, index);
      if (prevText.length > 0)
        resNodes.push(document.createTextNode(prevText));

      let elem = wrapBlank.cloneNode(false);
      elem.textContent = textContent.slice(index, index + searchText.length);
      resNodes.push(elem);

      beginIndex = index + searchText.length;
    }
    if (beginIndex === 0)
      return resNodes;
    let prevText = textContent.slice(beginIndex);
    if (prevText.length > 0)
      resNodes.push(document.createTextNode(prevText));
    return resNodes;
  }

  function wrapTextNodes(elementNode, searchText, wrapBlank) {
    let childNodes = Array.from(elementNode.childNodes);
    for (let child of childNodes)
      switch (child.nodeType) {
        case Node.TEXT_NODE:
          let nodesArr = wrapTextInTextNode(child, searchText, wrapBlank);
          if (nodesArr.length === 0)
            break;
          let prev = child;
          for (let node of nodesArr) {
            prev.after(node);
            prev = node;
          }
          child.remove();
          break;
        case Node.ELEMENT_NODE:
          wrapTextNodes(child, searchText, wrapBlank);
          break;
      }
  }

  function unwrapTextNodes(elementNode, wrapBlank) {
    let wrappedNodes = elementNode.querySelectorAll("." + wrapBlank.className);
    for (let i = 0; i < wrappedNodes.length; ++i) {
      let prevNode = wrappedNodes[i].previousSibling;
      let nextNode = wrappedNodes[i].nextSibling;

      let textNode = document.createTextNode(wrappedNodes[i].textContent);
      wrappedNodes[i].replaceWith(textNode);

      if (prevNode && prevNode.nodeType === Node.TEXT_NODE) {
        prevNode.textContent += textNode.textContent;
        textNode.remove();
        textNode = prevNode;
      }
      if (nextNode && nextNode.nodeType === Node.TEXT_NODE) {
        textNode.textContent += nextNode.textContent;
        nextNode.remove();
      }
    }
  }

  //Функции для управления прокруткой страницы

  function scrollToFoundElement(foundElement, topOffset) {
    let elementRect = foundElement.getBoundingClientRect();
    let windowWidth = document.documentElement.clientWidth;
    let windowHeight = document.documentElement.clientHeight;
    const borderShift = Math.floor(Math.min(20, windowWidth, windowHeight) * 0.5);

    let middleX = windowWidth * 0.5;
    let middleY = (windowHeight - topOffset) * 0.5 + topOffset;
    if (middleY < 0)
      middleY = 0;

    let scrollX = 0,
      scrollY = 0;
    if (elementRect.left < middleX) {
      if (elementRect.left < borderShift)
        scrollX = elementRect.left - borderShift;
    } else {
      if (elementRect.right > windowWidth - borderShift)
        scrollX = elementRect.right - (windowWidth - borderShift);
    }
    if (elementRect.top < middleY) {
      if (elementRect.top < topOffset + borderShift)
        scrollY = elementRect.top - (topOffset + borderShift);
    } else {
      if (elementRect.bottom > windowHeight - borderShift)
        scrollY = elementRect.bottom - (windowHeight - borderShift);
    }
    window.scrollBy(scrollX, scrollY);
  }

  function getElementPositionInDocument(element) {
    let elementRect = element.getBoundingClientRect();
    return {
      left: elementRect.left + document.documentElement.scrollLeft,
      top: elementRect.top + document.documentElement.scrollTop,
    };
  }

  function elementPositionInDocumentToArrayPosition(elementsArray, elementPositionInDocument) {
    let arrayPosition = 0;
    let minY = Number.POSITIVE_INFINITY;
    let minX = Number.POSITIVE_INFINITY;
    let {
      left,
      top
    } = elementPositionInDocument;
    let documentScrollLeft = document.documentElement.scrollLeft;
    let documentScrollTop = document.documentElement.scrollTop;

    for (let i = 0; i < elementsArray.length; ++i) {
      let elementRect = elementsArray[i].getBoundingClientRect();
      let x = elementRect.left + documentScrollLeft;
      let y = elementRect.top + documentScrollTop;
      let yb = elementRect.bottom + documentScrollTop;
      if (y < minY || y === minY && x < minX)
        if (y <= top && yb >= top && left <= x || y > top) {
          minY = y;
          minX = x;
          arrayPosition = i;
        }
    }
    return arrayPosition;
  }

  //Назначаем обработчики событий на элементы управления страницы

  const classNameFoundAll = "found-all"; //Класс для подсвечивания всех результатов поиска
  const classNameFoundCurrent = "found-current"; //Класс для подсвечивания текущего результата
  const wrapBlank = document.createElement("span"); //Заготовка для оборачивания результатов поиска
  wrapBlank.className = "found-result"; //Класс для идентификации результатов поиска.

  const searchBlock = document.getElementById("search-block");
  const controlBlock = document.getElementById("control-block");

  const controlInputText = document.getElementById("input-text");
  const controlButtonBegin = document.getElementById("button-begin");
  const controlButtonPrevious = document.getElementById("button-previous");
  const controlButtonNext = document.getElementById("button-next");
  const controlCheckboxAll = document.getElementById("checkbox-all");

  const controlBlockHeight = controlBlock.offsetHeight + 5;
  searchBlock.style.marginTop = controlBlockHeight + "px";

  let foundElements = []; //Коллекция узлов, имеющих класс "found-result"
  let foundElementsPos = -1; //Индекс текущего подсвеченного узла в коллекции foundElements
  let foundElementPositionInDocument = {
    left: 0,
    top: 0
  }; //Координаты текущего подсвеченного узла, либо клика
  let flagClick = false;

  searchBlock.addEventListener("click", handlerSearchBlock);

  controlInputText.addEventListener("input", handlerInputText);
  controlButtonBegin.addEventListener("click", handlerButtonBegin);
  controlButtonPrevious.addEventListener("click", () => handlerNextPrevious("previous"));
  controlButtonNext.addEventListener("click", () => handlerNextPrevious("next"));
  controlCheckboxAll.addEventListener("input", handlerCheckboxAll);
  document.addEventListener("keydown", handlerKeydown);

  handlerInputText();

  function handlerSearchBlock(event) {
    flagClick = true;
    foundElementPositionInDocument = {
      left: event.clientX + document.documentElement.scrollLeft,
      top: event.clientY + document.documentElement.scrollTop,
    };
  }

  function handlerInputText() {
    unwrapTextNodes(searchBlock, wrapBlank);

    foundElements = [];
    foundElementsPos = -1;
    let searchText = controlInputText.value.trim().toLocaleLowerCase();
    if (searchText.length > 0) {
      wrapTextNodes(searchBlock, searchText, wrapBlank);
      foundElements = searchBlock.querySelectorAll("." + wrapBlank.className);
      if (foundElements.length > 0) {
        if (controlCheckboxAll.checked)
          for (let i = 0; i < foundElements.length; ++i)
            foundElements[i].classList.add(classNameFoundAll);

        flagClick = false;
        foundElementsPos = elementPositionInDocumentToArrayPosition(foundElements, foundElementPositionInDocument);
        foundElementPositionInDocument = getElementPositionInDocument(foundElements[foundElementsPos]);
        foundElements[foundElementsPos].classList.add(classNameFoundCurrent);
        scrollToFoundElement(foundElements[foundElementsPos], controlBlockHeight);
      }
    }
  }

  function handlerButtonBegin() {
    foundElementPositionInDocument = {
      left: 0,
      top: 0
    };
    handlerInputText();
  }

  function handlerNextPrevious(strNextOrPrevious) {
    if (foundElements.length === 0)
      return;

    foundElements[foundElementsPos].classList.toggle(classNameFoundCurrent);

    let inc = 1;
    if (flagClick) {
      flagClick = false;
      inc = 0;
      foundElementsPos = elementPositionInDocumentToArrayPosition(foundElements, foundElementPositionInDocument);
    }
    foundElementsPos += strNextOrPrevious === "next" ? inc : -1;
    if (foundElementsPos >= foundElements.length)
      foundElementsPos = 0;
    else if (foundElementsPos < 0)
      foundElementsPos = foundElements.length - 1;

    foundElementPositionInDocument = getElementPositionInDocument(foundElements[foundElementsPos]);
    foundElements[foundElementsPos].classList.toggle(classNameFoundCurrent);
    scrollToFoundElement(foundElements[foundElementsPos], controlBlockHeight);
  }

  function handlerCheckboxAll() {
    const actionName = controlCheckboxAll.checked ? "add" : "remove";
    for (let i = 0; i < foundElements.length; ++i)
      foundElements[i].classList[actionName](classNameFoundAll);
  }
  function handlerKeydown(event) {
    if (event.code === "KeyF" && (event.ctrlKey || event.metaKey)) {
      event.preventDefault();
      controlInputText.focus();
    }
  }
}

textSearch();
.found-all {
  background-color: yellow;
}

.found-current {
  background-color: lime;
}

#control-block {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index: 1;
  padding: 5px;
  background-color: gainsboro;
}

#search-block {
  position: absolute;
  margin-top: 105px;
}
<div id="control-block">
  <p><label>Текст для поиска: <input type = "text" id = "input-text"></label></p>
  <p>
    <button type="button" id="button-begin">Найти сначала</button>
    <button type="button" id="button-previous">Назад</button>
    <button type="button" id="button-next">Вперёд</button>
    <label><input type = "checkbox" id = "checkbox-all" checked>Подсветить все</label>
  </p>
</div>

<div id="search-block">
  <p>Вот, надо тыкать кнопку, само не ищет :c</p>

  <p>Система вопросов и ответов о программировании, разработанная Джоэлем Спольски и Джеффом Этвудом в 2008 году. Является частью Stack Exchange Network. Как и в других системах подобного рода, Stack Overflow предоставляет возможность оценивать вопросы и
    ответы, что поднимает или понижает репутацию зарегистрированных пользователей. Проект создан на C# с использованием ASP.NET 4 и ASP.NET MVC.</p>

  <p>Система вопросов и ответов о программировании, разработанная Джоэлем Спольски и Джеффом Этвудом в 2008 году. Является частью Stack Exchange Network. Как и в других системах подобного рода, Stack Overflow предоставляет возможность оценивать вопросы и
    ответы, что поднимает или понижает репутацию зарегистрированных пользователей. Проект создан на C# с использованием ASP.NET 4 и ASP.NET MVC.</p>

  <p>Система вопросов и ответов о программировании, разработанная Джоэлем Спольски и Джеффом Этвудом в 2008 году. Является частью Stack Exchange Network. Как и в других системах подобного рода, Stack Overflow предоставляет возможность оценивать вопросы и
    ответы, что поднимает или понижает репутацию зарегистрированных пользователей. Проект создан на C# с использованием ASP.NET 4 и ASP.NET MVC.</p>

  <p>Система вопросов и ответов о программировании, разработанная Джоэлем Спольски и Джеффом Этвудом в 2008 году. Является частью Stack Exchange Network. Как и в других системах подобного рода, Stack Overflow предоставляет возможность оценивать вопросы и
    ответы, что поднимает или понижает репутацию зарегистрированных пользователей. Проект создан на C# с использованием ASP.NET 4 и ASP.NET MVC.</p>
</div>


Если необходимо фокусироваться на строке ввода при нажатии комбинации клавиш Ctrl+F, то добавляем к документу обработчик события keydown, в котором предотвращаем действие браузера по умолчанию и вызываем метод focus() у интересующего элемента.

document.addEventListener("keydown", handlerKeydown);

function handlerKeydown(event) {
    if (event.code === "KeyF" && (event.ctrlKey || event.metaKey)) {
        event.preventDefault();
        controlInputText.focus(); //document.getElementById("input-text").focus();
    }
}

P.S. Замещать реакцию браузера на некоторые стандартные действия, такие как, например, вызов контекстного меню, или нажатие Ctrl+C, или Ctrl+F — это спорное решение.

3
  • Огромное спасибо, именно то, что нужно. Только есть такой вопрос: Возможно ли сделать так, что бы строка ввода активировалась нажатием клавиш Ctrl+F? Речь про второй вариант. 7 апр 2021 в 19:42
  • @FiftyFour7250, да, можно, обновил ответ.
    – wololo
    10 апр 2021 в 14:12
  • К сожалению, там где мне это нужно - CTRL+F всё ещё не работает. Это не браузер, а приложение. Полагаю, из-за того, что всё заблокировано, и выделение текста, и CTRL+C, и CTRL+F. Но выделение удалось разблокировать этим кодом.pastebin.com/3RfxXhR6 . Так что, наверное, можно и остальное разблокировать. Впрочем, это уже перерастает в другой вопрос. В любом случае - спасибо) 11 апр 2021 в 2:21

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.