javascript - 在不重写 HTML 的情况下在文本周围动态添加 anchor 标记

Question

我使用 javascript、jQuery 和正则表达式在页面上的所有主题标签周围添加 anchor (#hashtag)。正则表达式检测到主题标签，然后我使用 jQuery 重写 HTML 和 javascript .replace() 添加 anchor 标签。我还做了一个 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 结构。在许多不同的网站上做这件事真的很麻烦。

因此，与其修复重写，我还想找到另一种方法来做到这一点。有什么方法可以完成同样的事情(在页面上的所有主题标签周围添加 anchor 标记)，而无需在每次加载时在页面上重写整个 HTML？

如果没有，我该如何调整我的 javascript，使其不会与人们网站上的 javascript 冲突。

Answer 1

这会将此页面上的每个 textnode 替换为 hash 标签:

<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