Reputation: 31

Search on page with javascript

I have a html page, and I want to find on it some data, but main trouble is that page is generated on server, and I want to write javascript code on my local machine and run it. So how can I write and run on local machine javascript code, so that it will find text, or get element by id/class?

Note, this is important: only pure javascript, no libraries like jQuerys and etc!

Thank you.

Upvotes: 2

Answers (2)

T.J. Crowder

Reputation: 1073978

Updated answer:

I didn't understand at first that you want to call up a web page you're not in control of, and then use JavaScript in your browser to interact with it.

The information in the original answer below is still relevant, but the question is: How do you make the code run in the right context? And the answer is: There are at least two ways:

Any decent browser these days has built-in debugging tools. Look on the menus for them, but in many browsers they're accessible via the F12 key or Ctrl+Shift+I. In those tools, you'll find a "console" where you can type JavaScript and have it run in the context of the page you're looking at.

This is great for doing things interactively, but it's a bit of a pain to retype it every time. You can also put the code in a local file (say, /home/tjc/foo.js) and then when you go to the page, use the console to append that script to the page (which will cause it to execute, within the context of the page), like this:
```
 document.documentElement.appendChild(document.createElement('script')).src = "file:///home/tjc/foo.js";
```
Once you have your script doing what you want, you might want to turn it into a bookmarklet. This is a browser bookmark using the javascript: scheme rather than the usual http: and such. See the link for details. You'll want a tool that takes your JavaScript code and does the necessary URL-encoding for you, like the Bookmarklet Crunchinator or similar.

Original answer:

... so that it will find text, or get element by id/class...

Those are three very different questions:

To find text on the page, you have a couple of options:
1. If you only want to find the text but don't much care exactly what element contains it, you can just look through innerHTML on document.body. innerHTML is a string; when you access it, the browser creates an HTML string for all of the DOM elements in the element you call it on (and its descendants). Note that this is not the original content from the server; this is created on-the-fly when you access the element. For a lot of use-cases, getting this string and then looking through it could be useful. Note that the text you're searching through is markup, so for instance, if you searched for the word "table" you might find it in a sentence ("We sat down at the table.") or in markup (<table>...).
  
  Here's an example of counting the word I'm on the page using innerHTML: live copy | source - See note about examples at the end.
```
 (function() {

   var pageText = document.body.innerHTML;
   display('Count of "I\'m" on the page: ' +
           pageText.match(/I'm/g).length);

   function display(msg) {
     var p = document.createElement('p');
     p.innerHTML = String(msg);
     document.body.appendChild(p);
   }

 })();
```
2. If you need to find out exactly what element it's in, you'll need to write a recursive function that walks through the nodes of the page and, for Text nodes, looks at the text within. Here's a basic example (the function is the walk function): Live copy | source - See note about examples at the end.
```
 (function() {
   var matches = [], index;

   walk(matches, document.body, "");

   function walk(matches, node, path) {
     var child;

     switch (node.nodeType) {
       case 1: // Element
         for (child = node.firstChild; child; child = child.nextSibling) {
           walk(matches, child, path + "/" + node.tagName);
         }
         break;
       case 3: // Text
         if (node.nodeValue.indexOf("I'm") !== -1 ) {
           matches.push("Found it at " + path);
         }
         break;
     }
   }

   display("Matches found (" + matches.length + "):");
   for (index = 0; index < matches.length; ++index) {
     display(matches[index]);
   }

   function display(msg) {
     var p = document.createElement('p');
     p.innerHTML = String(msg);
     document.body.appendChild(p);
   }

 })();
```
To find an element on the page by id, use document.getElementById.
To find an element on the page by class, on most modern browsers you can use either getElementsByClassName or querySelectorAll.

Note about the examples: I'm using JSBin, which puts the JavaScript you see on the left-hand side in the "source" view at the end of the HTML you see on the right (just before the closing </body> tag), by default. This is in keeping with best practices.

Reading:

Upvotes: 4

byCoder

Reputation: 9184

If you are looking for imacros solution, then it'some like this:

 var reportDataTable = window.content.document.getElementById("yoursid");
 if (reportDataTable == null)
 {
    iimPlay("mac1.iim");
 }
 else
 {
    iimDisplay("stop!");
 }

Where mac1.iim is macros, which would repeated, until

window.content.document.getElementById("yoursid");

will not be founded

Upvotes: -1

Search on page with javascript

Answers (2)

Related Questions