1

I am trying to search for a word inside a pdf using a textbox inside the webpage.I embedded the pdf inside a IFRAME, but it is not working.This code is working with normal text.When i search for words, sometimes it opens the pdf or refreshes the page, instead of highlighting it.

    <style>
      span.highlight {
  background: yellow
}
        </style>
        <input type="text" />
        <div class="para">
        <button onclick="getIframeText()">get iframe text</button>
        <iframe id="myframe1" src="h.pdf" style="width:718px; height:700px;" frameborder="0"></iframe>

    </div>

JAVASCRIPT FOR SEACRHING THE TEXT

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
   <script type='text/javascript'>
 var $para = $('.para')
$("input").keyup(function() {
  $para.find('span.highlight').contents().unwrap();
  var mysearchword = this.value.trim();
  if (mysearchword) {
    var re = new RegExp('(' + mysearchword.trim().split(/\s+/).join('|') + ')', "gi");
    $para.html(function(i, html) {
      return html.replace(re, '<span class="highlight">$1</span>')
    });
  }
});
</script>
Olavi Sau
  • 1,647
  • 13
  • 20
SSangeet
  • 71
  • 1
  • 11
  • 1
    Why are you using iframes? There are other ways to get to where you want to go. I'd recommend using PDF.js One of the things that library does is convert a PDF to other formats, where it can be searched easily. – zipzit Oct 30 '15 at 06:45
  • @zipzit pdf.js is not working in all browsers. – SSangeet Oct 30 '15 at 06:47
  • @zipzit i have to search the word inside it & then i have to highlight that word inside the pdf & display the PDF for user – SSangeet Oct 30 '15 at 06:48
  • Per `https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#faq-support` If you want to support more browsers than Firefox you'll need to include compatibility.js which has polyfills for missing features. PDF.js support is pretty awesome. – zipzit Oct 30 '15 at 06:53
  • Use PDF.js to convert the PDF document to an alternative format, then do your search and report. What's not clear.. why PDF? Are the PDF files on your domain? – zipzit Oct 30 '15 at 06:55
  • Yeah.. PDF.js converts PDF to canvas, and that's not going to be easy to search and highlight. I do see this link which provides a library to convert PDF to html. ref: http://stackoverflow.com/questions/16785198/use-pdf-js-to-statically-convert-a-pdf-to-html – zipzit Oct 30 '15 at 07:02
  • actually the project is for the BOOKSTORE where books are stored online in pdf format & according to user search,proper highlighted words display in the pdfs,actually that searched word (in highlight text)will be insert before the loading of pdf but right now i am trying to do it in the current page – SSangeet Oct 30 '15 at 07:02
  • A whole book. Ugh. Libraries that convert large PDF documents to something useful take a VERY LONG TIME to do the conversion. Better to use Acrobat Reader's tools? – zipzit Oct 30 '15 at 07:05
  • Oh.. is this just a timing issue? You definitely don't want to perform a search until the iframe document is fully loaded in the browser. check out http://stackoverflow.com/questions/251420/invoking-javascript-code-in-an-iframe-from-the-parent-page?rq=1 answer from Bobince – zipzit Oct 30 '15 at 07:06
  • @zipzit i already did this to read the content of the pdf or part inside the pdf like PDF's inbuilt search box but it gives me this error in console "Permission denied to access property document embed iframe" – SSangeet Oct 30 '15 at 07:13
  • Why Iframe? Can you just place the pdf inside the DOM via `` or if necessaruy, PDFobject, without iframe? http://pdfobject.com/instructions.php – zipzit Oct 30 '15 at 07:19

1 Answers1

0

The code will not work for PDF.

Replacing the word found in HTML with highlight class, it's okay. But this is not possible for PDF. You need to convert PDF into HTML first.

Sachink
  • 1,425
  • 10
  • 22
  • i know that the problem is i have to read the word inside the pdf or highlight it.Other guy posted in comment that it is possible with PDF.js but i think pdf.js is not working in all browsers – SSangeet Oct 30 '15 at 07:00
  • Note: PDF doesn't really have a DOM. So anyhow condition you need to convert the PDF to the element like HTML, SVG, CANVAS or else DOM supported elements. – Sachink Oct 30 '15 at 07:38