Geek Answers Handbook

Replace only one text text, with some html, with iframe

What should I do

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

This iframe has my javascript function that searches for a keyword in the body of the parent document and replaces it with the html <a href="#">keyword</a> link in the parent document.

What i tried

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

My problems / questions

  • The problem is that the "keyword" is replaced with "not interpreted" html as text. (The browser displays the <a href="#">keyword</a> ).
  • My second question is how to make a replacement only once, and not for all relevant expressions?

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

Any idea to help me? (I don’t want anyone to “write my code”, I just need some advice to do this myself)

PS 1: I use Chrome, but I would like it to work in every browser.

PS 2: English is not my first language, so if you don’t understand something, do not hesitate to ask him about it, I will try to explain it better.

Edit 2

The first script now works for HTML, so question 1 is resolved, but how to make a replacement only once, even if the keyword is repeated several times? (question 2)

+1
source share
1 answer

With xiaoyi, I found several solutions:

  • Stop the loop and replace only the first match
  • Globalization of functions for searching / replacing multiple keywords

I think it can be optimized, but for me it works like a charm, and I share it if it can help anyone (do not forget to change the purpose of the document, here is the “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 // ... }());

I also found that the second solution does not work with Internet Explorer, because it does not accept the createTreeWalker() DOM function

0
source

More articles:


All Articles