Question

我正在使用javascript，jQuery和regex在页面上的所有主题标签周围添加锚点（#hashtag）。正则表达式检测到的是标签的东西，然后我使用jQuery重新编写HTML和一个javascript .replace（）来添加锚标签。我也做一个javascript if语句，所以它不会替换脚本和样式标签内的东西。

var regExp = /(\W)#([a-zA-Z_]+)(\W)/gm;
var boxLink = "$1<a class='tagLink' onClick=\"doServer('#$2')\">#$2</a>$3"
$('body').children().each(function(){

if (($(this).get(0).tagName.toLowerCase() != 'style') 
 && ($(this).get(0).tagName.toLowerCase() != 'script') 
) {
    $(this).html($(this).html().replace(regExp, boxLink));
  }
  });
});

够简单......对吧？

问题是我正在制作一个插件，因此开发人员会在他们的网站上进行部署。 html重写（$(this).html($(this).html().replace(regExp, boxLink));）打破了网站上似乎随机的javascript区域。它有时会混淆一些HTML结构。在许多不同的网站上做这件事真的很麻烦。

所以不要再修复重写，我想找到另一种方法来做到这一点。有没有什么方法可以完成相同的事情（在页面上的所有主题标签周围添加锚标签），而无需在每次加载时重写页面上的整个HTML？

如果没有，我怎么能调整我的javascript以便它与人们网站上的javascript没有太大的冲突。

Answer 1

这会在此页面上使用哈希标记替换每个 textnode ：

<span>texts without hash <a name = "myplugin">#</a></span>

您可以替换正则表达式来匹配您的：）

var getTextNodesIn = function(el) {
    $(el).find("*").andSelf().contents().each(function() {
        var parentNode = this.parentNode.nodeName,
            data = this.data;
        if(this.nodeType == 3 && parentNode !== "SCRIPT" && parentNode !== "STYLE" && data.indexOf("#") > -1){
            var anch = data.replace(/#/g,"#".anchor("myplugin")); 
            $(this).replaceWith("<span>"+anch+"<span/>");
        }
    });
};

getTextNodesIn(document.body);

P.S getTextNodesIn函数来自这篇文章：

https://stackoverflow.com/a/4399718/776575

Answer 2

我认为问题的一部分是你需要隔离文本节点并对其进行操作，而不是html的块。您的示例仅迭代body的直接子项，但随后尝试将替换应用于这些子项中的任何html。这很容易导致现有的标记和javascript中断。

问题的答案可能会有所帮助：How do I select text nodes with jQuery?

在文本周围动态添加锚标记，而不重写HTML

2 个答案: