Question

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

我想做什么？我想为用户提供一个脚本，他们可以将这些脚本添加到他们的网页/博客中，这些脚本将在他们的网页上突出显示cretain文本，并在悬停时显示一个显示的菜单/框。像kontera这样的东西。

为此，我正在做以下事项：
1.通过以下方法解析加载脚本的页面的HTML：
Regexp to search/replace only text, not in HTML attribute
（见第一个答案）
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

也许您可以尝试以不同的方式在标记中包含关键字术语。我使用此代码在文档中进行搜索（创建Search Bookmarklet for 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');

需要有关Javascript html解析器的帮助以满足特定需求

2 个答案: