Iframe 仅用一些 html 替换一次正文文本

Question

我需要做什么

我在 HTML 页面的正文中显示带有 javascript 的 iframe。 类似document.write('<iframe ...></iframe'>);

在这个 iframe 中有我的 javascript 函数，它在父文档的正文中搜索关键字，并将其替换为父文档中的 html 链接 <a href="#">keyword</a>。

我的尝试

• Javascript Bookmarklet to replace text with a link : 复杂的脚本，但我需要skipTags
• 和Javascript .replace command replace page text?：非常短而漂亮的脚本，但没有skipTags功能...

当脚本在文档中但不在 iframe 中以与父文档一起使用时，这些功能就像一个魅力。

我的问题/疑问

1. 问题是“关键字”被替换为 '非解释' html 作为文本。 （浏览器显示<a href="#">keyword</a>）。
2. 我的第二个问题是如何只进行一次替换，而不是 所有匹配的表达式？

通常我使用一些 jQuery，但在这个项目中我只需要使用一些没有任何库的 javascript。

有什么想法可以帮助我吗？ （我不希望任何人“编写我的代码”，我只是想要一些建议让我自己编写代码）

附注1 : 我使用 Chrome，但我想让它在每个浏览器中都能正常工作。

附注2 : 英语不是我的母语，所以如果你有什么不懂的地方，尽管问我，我会尽力解释得更好。

编辑 2

第一个脚本现在适用于 HTML，所以问题 1 解决了，但是如何只替换一次，即使关键字重复多次？ （问题2）

Answer 1

在xiaoyi的帮助下，我找到了一些解决方案：

• 停止循环并仅替换第一个匹配项
• 全球化搜索/替换多个关键字的功能

我认为它可以被优化，但对我来说它就像一个魅力，我与你分享它，如果它可以帮助任何人（不要忘记更改文档的目标，这里是“父”） ：

(function(){
    // don't replace text within these tags
    var skipTags = { 'a': 1, 'style': 1, 'script': 1, 'iframe': 1, 'meta':1, 'title':1, 'img':1, 'h':1 };
    // find text nodes to apply replFn to
    function findKW( el, term, replFn ) 
    {
        var child, tag,found=false;
        for (var i = 0;i<=el.childNodes.length - 1 && !found; i++)
        {
            child = el.childNodes[i];
            if (child.nodeType == 1) 
            { // ELEMENT_NODE
                tag = child.nodeName.toLowerCase();
                if (!(tag in skipTags)) 
                {
                    findKW(child, term, replFn);
                }
            } 
            else if (child.nodeType == 3) 
            { // TEXT_NODE
                found=replaceKW(child, term, replFn); // if found=true, we stop the loop
            }
        }
     }; 
    // replace terms in text according to replFn
    function replaceKW( text, term, replFn) 
    {
        var match,
            matches = [],found=false;
        while (match = term.exec(text.data)) 
        {
            matches.push(match);
        }
        for (var i = 0;i<=matches.length - 1 && !found; i++)
        {           
            match = matches[i];         
            // cut out the text node to replace
            text.splitText(match.index);
            text.nextSibling.splitText(match[1].length);
            text.parentNode.replaceChild(replFn(match[1]), text.nextSibling);
            if(matches[i])found=true;// To stop the loop            
        }
        return found;
    };
    // First search/replace
    var replTerm = 'keyword';
    findKW(
        parent.document.body, 
        new RegExp('\\b(' + replTerm + ')\\b', 'gi'),
        function (match) 
        {
          var link = parent.document.createElement('a');
          link.href = 'http://www.okisurf.com/#q=' + replTerm;
          link.target = '_blank';
          link.innerHTML = match;
          return link;
        }
    );
    // A second search/replace
    var replTerm = 'word';
    findKW(
        parent.document.body, 
        new RegExp('\\b(' + replTerm + ')\\b', 'gi'),
        function (match) 
        {
          var link = parent.document.createElement('a');
          link.href = 'http://www.okisurf.com/#q=' + replTerm;
          link.target = '_blank';
          link.innerHTML = match;
          return link;
        }
    );
    // Other search/replace
    // ...
}());

我还发现第二种解决方案不适用于 Internet Explorer 女巫不接受 createTreeWalker() DOM 函数