javascript - Search iframe content with jquery and input element on parent page

Question

I was wondering how I can have a text input element on the parent page which searches the content of an Iframe within the parent page.

The goal is to have the input text processed and to highlight the matches within the iframe.

Any suggested approaches or references would be appreciated.

Thanks...

EDIT: I understand the limitations on the same origin policy, The parent page rendering the iframe and javascript to search, as well as the iframe on the parent page would be of the same domain origin.

HTML:

    <input type="text" id="searchfor"/>
<iframe src="http://www.page.com" id="search">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tinci futurum.</iframe>

JAVASCRIPT:

$('#searchfor').keyup(function(){
         var page = $('iframe[id="search"]').contents().find("html").html();
         var pageText = page.text().replace("<span>","").replace("</span>");

    var searchedText = $('#searchfor').val();
    console.log(searchedText);
    var theRegEx = new RegExp("("+searchedText+")", "igm");    
         var newHtml = pageText.replace(theRegEx ,"<span>$1</span>");
         page.html(newHtml);
    });

Answer 1

Waitting for answers