Gecko Find/Highlight Text In Page
Jul 9, 2002
People have complained that window.find() doesn't work, and everyone knows Gecko doesn't support IE's proprietary TextRange object, some have assumed you can't do this in Gecko.
On the contrary though:
Node.prototype.findTextMatches = [];
Node.prototype.findText = function(query, ignoreCase) {
this.findTextMatches.length = 0;
if (ignoreCase)
query = query.toLowerCase();
var tw = this.ownerDocument.createTreeWalker(this, NodeFilter.SHOW_TEXT, { acceptNode: function(node) {return NodeFilter['FILTER_' + (RegExp(query, (ignoreCase ? 'i' : '')).test(node.nodeValue) ? 'ACCEPT' : 'REJECT')] } }, true);
var offsets = [];
offsets[-1] = query.length * -1;
var totalMatches, trueOffsetDiff;
var range = this.ownerDocument.createRange();
while (tw.nextNode()) {
totalMatches = tw.currentNode.nodeValue.split(RegExp(query, (ignoreCase ? 'i' : ''))).length - 1;
for (var i = 0; i < totalMatches; i++) {
trueOffsetDiff = offsets[offsets.length - 1] + query.length;
offsets[offsets.length] = tw.currentNode.nodeValue.substr(trueOffsetDiff)[ignoreCase ? 'toLowerCase' : 'toString']().indexOf(query) + trueOffsetDiff;
range.selectNode(tw.currentNode);
range.setStart(tw.currentNode, offsets[offsets.length - 1]);
range.setEnd(tw.currentNode, range.startOffset + query.length);
this.findTextMatches[this.findTextMatches.length] = range.cloneRange();
}
offsets.length = 0;
}
return (tw.currentNode != this);
}
Node.prototype.highlightText = function() {
if (this.findTextMatches.length > 0) {
with (window.getSelection()) {
removeAllRanges();
addRange(this.findTextMatches.shift());
}
return true;
}
else
return false;
}
To search all text in the body, ignoring case, you'd go like:
document.body.findText('search query', true);
That loads up an array full of ranges selecting the text into document.body.findTextMatches.
To selectively highlight next occurences after executing findText:
document.body.highlightText();
// highlights first occurence
document.body.highlightText();
// removes previous selection, highlights second occurrence
// etc
Just calling that method over and over will successfully highlight instances. It returns true if it highlighted something, false otherwise,
Also, since I prototyped Node, it works not just in HTML documents, but can work in XML documents too.
Calling document.findText in an HTMLDocument may cause interesting results, as it searches through all the nodes, including <head>...
View 8 Replies
ADVERTISEMENT
Dec 11, 2010
I'm working on an educational website for reading strategies where I would like to have the possibilty for the user to highlight text and the possibilty to check their highlighted answers.User task: Mark all the cause and effect connectors (because, so, therefore etc) in the text.Now I want the user to take the mouse and go over the text and mark all these connectors in the text. After marking the entire text the user will get feedback for his correct and incorrect answers and a possibilty to correct his mistakes.If the user marks in the sentence "He got hurt, because he fell of his bike." the word 'because' I would like somewhere else on the page be written that he did this correctly. If he would mark the word 'hurt' I would like the user to get a feedback saying that this answer is incorrect.Is this possible with simple html or do I need something else. If I need something else what do I need and maybe there is already a ready to use script for this.
View 2 Replies
View Related
Apr 2, 2011
Is it possible to have a text box input searching for the entered text on another webpage in the same way Find In Page would do? I have a webpage that I want users to input an item, and that this will open the targeted webpage and bring you to (and highlight) the matched item(s) like find in page does. Is this possible or is the easiest way to just make users open the link to the target page and just complete the find in page search there?
View 1 Replies
View Related
Sep 12, 2002
Someone submitted this script my way, and I thought I'd post it here first, to see if people can come up with improvements.
This is a find text inside page script. Basically one would enter any text into a textbox, and the script searches for matches on the page, and highlights it if found. The script can be specified to search text in another frame or iframe.
Right now the script works in IE plus NS7. I was hoping it could be modified to work in NS6 as well.
View 15 Replies
View Related
Aug 4, 2010
I wrote a function in PHP that converts characters for large strings. Here is the entire array:
[Code].....
View 2 Replies
View Related
Sep 10, 2010
Alright, I'm using a Rooh.It WordPress plugin right now, but I don't like the way they do it, so I want to write my own code to do something similar.
I want the user to be able to select the text they want to highlight, and the background color of that text changes to whatever color they have selected.
How can I do this in JavaScript?
View 4 Replies
View Related
Apr 21, 2011
Here's a sample form:
Code:
<form action="#" method="post">
Name:<br />
[code]...
View 3 Replies
View Related
Apr 21, 2011
Here's a sample form:
Code:
<form action="#" method="post">
Name:<br />
<input type="text" name="name" value="your name" /><br />
[Code].....
When you tab to a text input, the value gets highlighted. How can it be disabled?
View 7 Replies
View Related
Apr 21, 2011
Here's a sample form:
<form action="#" method="post">
Name:<br />
<input type="text" name="name" value="your name" /><br />
[code]....
View 1 Replies
View Related
Jun 16, 2003
I recently had need for the method document.elementFromPoint() found in Internet Explorer (http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/elementfrompoint.asp).
My immediate method for implementing this was artificially creating an arbitrary mouse event (decided on mousemove) at the specified coordinates, setting up an event listener on the document, firing the event, record the target, and remove the listener.
However, I apparently didn't pay close enough attention to this (http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-EventTarget-dispatchEvent):
The target of the event is the EventTarget on which dispatchEvent is called.
However, I had a hunch that Mozilla was merely redirecting the event to the document to be correct, and actually stored somewhere the "correct" target. After dumping the event object, I found a property which must have been recently introduced (Mozilla 1.4 branch apparently) called "explicitOriginalTarget" which is like originalTarget, but apparently never targets anonymous content, and in this case, also differs by referring to the element where the coordinates of the mouse event were.
Anyhoo, here's some code. I've tested it in various Mozilla 1.4 builds successfully (and double checked explicitOriginalTarget in < 1.4 builds to find that it doesn't exist). Firebird 0.6 is also based on 1.4, so it works in that too. By using the browser's box object and mouse events, instead of hacking my own, I don't think there should be any issues with it picking up elements that can't be seen.
// Program: document.elementFromPoint(int clientX, int clientY) in Gecko
// Author: Jason Karl Davis (www.jasonkarldavis.com)
// Date: 15 June 2003
// Purpose: Emulate Internet Explorer's document.elementFromPoint method as described here:
// http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/elementfrompoint.asp
// Requirements: A browser built off of the 1.4 branch of Mozilla (or better)
// Distribution: You may freely distribute and use this script as long as these comments remain intact
if (navigator.product == "Gecko") {
Document.prototype.elementFromPoint = function(x, y) {
this.addEventListener("mousemove", this.elementFromPoint__handler, false);
var event = this.createEvent("MouseEvents");
var box = this.getBoxObjectFor(this.documentElement);
var screenDelta = { x: box.screenX, y: box.screenY };
event.initMouseEvent("mousemove", true, false, this.defaultView, 0,
x + screenDelta.x, y + screenDelta.y, x, y,
false, false, false, false, 0, null);
this.dispatchEvent(event);
this.removeEventListener("mousemove", this.elementFromPoint__handler, false);
return this.elementFromPoint__target;
}
Document.prototype.elementFromPoint__handler = function (event) {
this.elementFromPoint__target = event.explicitOriginalTarget;
// reparent target if it is a text node to emulate IE's behavior
if (this.elementFromPoint__target.nodeType == Node.TEXT_NODE)
this.elementFromPoint__target = this.elementFromPoint__target.parentNode;
// change an HTML target to a BODY target to emulate IE's behavior (if we are in an HTML document)
if (this.elementFromPoint__target.nodeName.toUpperCase() == "HTML" && this.documentElement.nodeName.toUpperCase() == "HTML")
this.elementFromPoint__target = this.getElementsByTagName("BODY").item(0);
event.preventDefault();
event.stopPropagation();
}
Document.prototype.elementFromPoint__target = null;
}
And the reason I prototyped Document instead of adding it to document directly is that any extra documents you may have loaded on the same page inherit those methods. For example, an iframe or something. And it /should/ be usable in other, non-HTML documents as well, such as MathML, SVG, XUL, etc. :)
View 5 Replies
View Related
Jul 23, 2005
Is it possible, using Javascript, to highlight (in yellow..) all the occurrences of "number: [0-9]+" (regex) of the document?
View 5 Replies
View Related
Oct 20, 2006
On click of a link , the contents get displayed in an iframe. Is there a way to search some text in the content displayed in the iframe and highlight it.
View 1 Replies
View Related
Jul 14, 2007
Is there a way to selectively highlight text in an OverLib popup? I'd
like to be able to make some text stand out from the rest of the text
that is displayed.
I tried using a one-cell table with background set to yellow, but that
caused the popup not to work at all (this might be a syntax problem -
I haven't been able to find any syntax examples for putting a table
inside an OverLib call)
View 5 Replies
View Related
Oct 25, 2006
I dont know how to make the function, i would like it so that when the user enters the text it searchs the text on the page and hilites behind the text yellow. So its a bit like a "find" function that hilites behind the word that it is asked to find.
View 2 Replies
View Related
May 26, 2009
I have a list of 400+ names I am getting from a mysql database.They are listed out in a table.I would like to have a text box where once you start typing,the more I type the less matches come about
View 6 Replies
View Related
Oct 6, 2011
I have a webpage that has a texbox with states that the user can select using ajax auto complete extender. The states are separated by the ; character. Is it possible to select everything between the ; characters if a user clicks on any of the text between them.
[Code]...
View 1 Replies
View Related
Dec 3, 2005
I tried to use it but i guess i failed... here is a code:
<html>
<head>
<title></title>
<script type="text/javascript">
function closedWin() {
confirm("close ?");
return false; /* which will not allow to close the window */
}
if(window.addEventListener) {
window.addEventListener("close", closedWin, false);
}
window.onclose = closedWin;
</script>
</head>
<body>
</body>
</html>
View 6 Replies
View Related
Apr 18, 2006
I'm still getting to grips with Javascript parsing through http://www.w3schools.com/xml/xml_parser.asp. The problem is that I need a Gecko equivalent to the Internet Explorer example at the bottom of the page.
I need to parse XML that is in a variable from a Prototype ajax request.
View 2 Replies
View Related
Jul 3, 2010
What I want to do specifically is add a CSS class to strings that start with an @ symbol. I can't seem to find any examples online and I haven't had enough experience with jquery to figure this out on my own.
I want it to highlight either the first word only, or just the line that the @ symbol is found on.
View 8 Replies
View Related
May 11, 2010
I've tried to do it using the funciton below, it cycles through allright, but only highlights each field whilst it is in focus, then loses it when it moves to the next field. The result is that only the last text/textarea within the form is highlighted. My aim is to highlight all fields for subsequent spell checking.
View 13 Replies
View Related
Nov 22, 2002
Highlight a portion of the text and you can search it on the major search engines. The search box can also be used as a conventional search box too....
View 3 Replies
View Related
Dec 20, 2011
I have work thumbnails on one side (meals), ingredients on the other side, what I would like to do is:
1) If I hover over a meal, the ingredients used for that dish are highlighted on the left
2) If I hover over an ingredient, the dishes that used this ingredient are selected
I am just starting out in jQuery, can anyone give me some pointers.
View 5 Replies
View Related
Dec 20, 2007
I need to highlight words in text inside iFrame (target page is actually from another site). Code:
Is it possible to force this script to highlight text inside iFrame? Or probably there is another solution exists?
View 1 Replies
View Related
Jun 5, 2011
Got this below code for a page im working on, what you'll notice is that when you hover over 'order' a sub menu appears,
How do I make the 'order' remain highlight while Im hovering over the sub menus.
View 2 Replies
View Related
Jul 23, 2005
I'm working on a JSP application, and wish to define a text-field so
that it becomes marked (highligted) when it obtains focus.
I've tried giving the text-field a value when it obtains focus, but
the value is not marked. So if i wish to alter the value, I have to
manually delete the given 'onFocus' value before I set a new value.
<INPUT TYPE=TEXT NAME=test size=30 want this
to be highlighted!'">
I'm missing something to highlight the text-field text in the code
above.
View 1 Replies
View Related
Oct 15, 2010
I have spent the last week trying to figure out how to do the following: User types some text in a text box. The autocomplete queries a php script that returns JSON of matched values. I have got thedrop down list to show these values but I cannot for the life of me get the matched characters to turn bold. For example, if the user types in "rav" and my list contains:
RAVEN
RAVE
RAVEL
then I want it to appear as
RAVEN
RAVE
RAVEL
My current JS code is as follows (along with HTML):
$(function() {
$( "#query" ).autocomplete({
source: "get_json.php",
[code].....
View 6 Replies
View Related
