Нужна помощь с анализатором HTML Javascript для конкретных нужд

Question

Моя проблема немного сложна, я постараюсь объяснить это.

Что я пытаюсь сделать?
Я хочу предоставить пользователям сценарий, который они могут добавить к своей веб-странице / блогу, который выделит основной текст на их веб-страницах и поместит меню / поле, отображаемое при наведении курсора. Что-то вроде контера.

Для этого я делаю следующее:
1. Изучите HTML-код страницы, на которой загружен скрипт, следующим способом:
регулярное выражение для поиска / замены только текста, но не в атрибуте HTML
(см. первый ответ)
2. Если это текстовый узел, проверьте значение текстового узла на наличие в нем ключевых слов. (У меня есть около 1000 ключевых слов), и если ключевое слово найдено, замените его выделенным текстом и необходимыми вещами.

Когда я применяю это к своему блогу на blogger.com, браузер как рекурсивный вызов функции синтаксического анализатора зависает.
Я попытался подтвердить это, ограничив мои ключевые слова только 5 из 100.
Чем ее решить, я ограничился тем, что, если узлы имеют тип DIV или P или BODY, а затем только рекурсивно вызывают функцию, они все равно зависают.
Когда я удаляю DIV и оставляю только P и BODY, это работает.
Вы можете мне помочь? Заранее спасибо! :)

Answer 1

Возможно, вы можете попробовать другой способ обернуть ключевые слова в разметку. Я использую этот код для поиска в документе (создал Поиск Bookmarklet для iPad , чтобы я мог выполнять поиск в MobileSafari).

Может быть, вы могли бы использовать его для своих нужд, если он эффективен:

var SearchFor = {
    run: function(defaultText){
      if (!defaultText) {
        defaultText = "";
      }
      var searchText = prompt("Search for:", defaultText);
      if (!searchText)  {
        return false;
      }
      return this.highlightKeyword(searchText);
    },

    highlightKeyword: function(searchText) {

      var searchArray = [searchText];

      if (!document.body || typeof(document.body.innerHTML) == "undefined") {
        return false;
      }

      var bodyText = document.body.innerHTML;
      for (var i = 0; i < searchArray.length; i++) {
        bodyText = this.highlight(bodyText, searchArray[i]);
      }

      document.body.innerHTML = bodyText;
      return true;
    },

    highlight: function(bodyText, searchTerm) {

     var highlightStartTag = "<span style='color:#CCCCCC; background-color:#FAF9DC;'>";
     var highlightEndTag   = "</span>";

      var newText = "";
      var i = -1;
      var lcSearchTerm = searchTerm.toLowerCase();
      var lcBodyText   = bodyText.toLowerCase();

      while (bodyText.length > 0) {
        i = lcBodyText.indexOf(lcSearchTerm, i+1);
        if (i < 0) {
          newText += bodyText;
          bodyText = "";
        } else {
          // skip anything inside an HTML tag
          if (bodyText.lastIndexOf(">", i) >= bodyText.lastIndexOf("<", i)) {
            // skip anything inside a <script> block
            if (lcBodyText.lastIndexOf("/script>", i) >= lcBodyText.lastIndexOf("<script", i)) {
              newText += bodyText.substring(0, i) + highlightStartTag + bodyText.substr(i, searchTerm.length) + highlightEndTag;
              bodyText = bodyText.substr(i + searchTerm.length);
              lcBodyText = bodyText.toLowerCase();
              i = -1;
            }
          }
        }
      }
      return newText;
    }
};

SearchFor.run('KeywordExample');

Answer 2

Я не уверен, что вам нужна рекурсивная функция для этого. Есть ли причина, по которой что-то подобное не сработает?:

var searchTerms = [ ... your list of words ... ];
for (var i = 0; i < searchTerms.length; i++) {
    var regex = new RegExp(">([^<]*)?("+searchTerms[i]+")([^>]*)?<","ig");
    var tempinnerHTML = element.innerHTML;
    element.innerHTML = tempinnerHTML.replace(regex,'>$1<span style="background-color:#DDF">$2</span>$3<');
}