需要针对特定​​需求的Javascript HTML解析器的帮助

Question

我的问题有点复杂，我将尽力解释。

我要做什么？
我想为用户提供一个脚本，他们可以将其添加到其网页/博客中，该脚本将在其网页上突出显示幕帘文本，并在其上放置一个菜单/框。 像kontera。

为此，我正在执行以下操作：
1.通过以下方法解析脚本加载页面的HTML：
正则表达式仅搜索/替换文本，而不搜索HTML属性
（请参阅第一个答案）
2.如果它是一个文本节点，则检查文本节点的值以查看其中是否存在任何关键字。 （我有大约1000个关键字），如果找到了关键字，请用突出显示的文本和所需的东西替换它。

当我将其应用于我在blogger.com上的博客时，解析器函数会递归地将浏览器挂起。
我试图通过将关键字限制为100个中的5个来确认这一点。
比解决这个问题，我限制了，如果节点是DIV或P或BODY类型，而不是仅递归调用该函数，它仍然会挂起。
当我删除DIV并仅保留P和BODY时，它将起作用。
你能帮助我吗？ 提前致谢！ :)

Answer 1

我不认为您需要为此使用递归函数。 是否有任何类似原因无法解决？

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<');
}

Answer 2

也许您可以尝试以其他方式将关键字字词包装在标记中。 我使用此代码在文档中进行搜索（ 为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');