用iframe仅替换一次带有一些html的正文文本 [英] Replace only once body text, with some html, by an Iframe

问题描述

我需要做什么

我在HTML页面的主体中显示带有javascript的iframe. 像这样的document.write('<iframe ...></iframe'>);

I display an iframe with javascript in the body of an HTML page. With something like that document.write('<iframe ...></iframe'>);

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

In this iframe there is my javascript function witch search a keyword in the body of the parent document, and replace it with an html link <a href="#">keyword</a> in the parent document.

我尝试过的事情

• 使用Javascript书签将链接替换为文本:复杂的脚本，但我需要skipTags
• 和 Javascript .replace命令替换页面文本吗?:非常简短且漂亮的脚本，但是没有skipTags函数...

• Javascript Bookmarklet to replace text with a link : complex script, but I need the skipTags
• and Javascript .replace command replace page text? : very short and nice script, but there is not the skipTags function...

当脚本在文档中但不在iframe中以与父文档一起使用时，这些脚本就像一个符咒.

Those worked like a charm when the script is in the document but not in an iframe to work with the parent document.

我的问题/疑问

1. 问题在于关键字"被替换为 未解释"的html作为文本. (浏览器显示<a href="#">keyword</a>).
2. 我的第二个问题是如何只执行一次替换，而不是 所有匹配的表达式?

1. The problem is that the 'keyword' is replaced with a 'non-interpreted' html as text. (Browser displays <a href="#">keyword</a>).
2. My second question is how to do the replace just once, and not for all the matching expressions ?

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

Usualy I use some jQuery but in this project I need to use only some javascript without any library.

有什么办法可以帮助我吗? (我不希望任何人编写我的代码"，我只想一些建议让我自己编写代码)

Any idea to help me ? (I don't want anyone to "write my code", I just want some advices to make it by myself)

P.S. 1:我使用的是Chrome，但我想使其在所有浏览器中均可使用.

P.S. 2:英语不是我的母语，因此，如果您听不懂某些内容，请不要犹豫地问我，我会尽力向您解释.

编辑2

第一个脚本现在可用于HTML，因此问题1得以解决，但是即使关键字重复几次，也只能执行一次替换? (问题2)

First script now works for the HTML, so question 1 is solved, but how to do the replace only once, even if the keyword is repeated several times ? (question 2)

推荐答案

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

With the help of xiaoyi, I've found some solutions :

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

我认为可以对其进行优化，但是对我来说，它就像一个魅力，如果可以帮助任何人，我可以与您分享(别忘了更改文档的目标，这里是父") :

I think that it could be optimized, but for me it works like a charm, and I share it with you, if it can help anyone (don't forget to change the target of the document, here "parent") :

(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函数

I've also discovered that the second solution doesn't works with Internet Explorer witch doesn't accept the createTreeWalker() DOM function

这篇关于用iframe仅替换一次带有一些html的正文文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！