469,631 Members | 1,297 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,631 developers. It's quick & easy.

Highlighting Text.

Hi all,

Ok, this is what I want to do:

When you press, say Ctrl+K ( it doesn't matter which event), I want the
, say, second word in the document to be highlighted.

Anyone has any idea how to go about doing this?
Any reply will be appreciated.
Jul 23 '05 #1
5 1787
Adelson Anton wrote:
When you press, say Ctrl+K ( it doesn't matter which event), I want the
, say, second word in the document to be highlighted.


Quickhack:

document.body.addEventListener(
"keypress",
function(e)
{
if (!e)
{
e = window.event;
}

if (e
&& e.ctrlKey
&& String.fromCharCode(e.which || e.keyCode).toLowerCase() == "k")
{
// highlight second word
}
},
true
);

Note that a UA may reserve Ctrl+K itself, so it is likely
that you break behavior your visitors are used to.
PointedEars
Jul 23 '05 #2
Adelson Anton wrote:
When you press, say Ctrl+K ( it doesn't matter which event), I want the
, say, second word in the document to be highlighted.


Quickhack:

document.body.addEventListener(
"keypress",
function(e)
{
if (!e)
{
e = window.event;
}

if (e
&& e.ctrlKey
&& String.fromCharCode(
e.charCode || e.keyCode).toLowerCase() == "k")
{
// highlight second word
}
},
true
);

Note that a UA may reserve Ctrl+K itself, so it is likely
that you break behavior your visitors are used to.
PointedEars
Jul 23 '05 #3
> // highlight second word

Well, this is the bit I was actually asking for. Thanks though.
Jul 23 '05 #4
Adelson Anton wrote:
// highlight second word
Well, this is the bit I was actually asking for.


Then you should have made that more clear. Please show your
attempts to solve the problem and point out where you are stuck.
Thanks though.


You're welcome.
PointedEars
Jul 23 '05 #5
Adelson Anton wrote:
When you press, say Ctrl+K ( it doesn't matter which event), I want the
, say, second word in the document to be highlighted.


A rather difficult issue!

First, most js/DOM implementations define a word in a simplistic way,
using basic 26 latin letters; words can be more complicated than that,
using accentuated characters or non-latin charsets (without even
mentioning word-splitting issues).

Once you've defined which chars you're ready to accept as word token (or
which chars you wish to refuse), it's not too complicated (even
cross-browsers) to get the Nth word, either using ranges or DOM methods
(paying attention to block-level elements which should be considered as
a word delimiter). However, highlighting the found word is much more a
challenge, since this implies an analysis of the underlying DOM,
splitting nodes where necessary etc.

IE offers a powerful Range Model (much more text-oriented than the W3C
Range model), which makes it much easier, using a specific conception;
you'll find an example below, which should work on IE4+. I haven't
attempted to build a cross-browser script here since I just have a
week-end:-)
<style type="text/css">
..highlight{ background:yellow; }
</style>

<script type="text/javascript">
var highlightWord=(function(){

function isWordChar(c){
return new RegExp(
"^"+
"[\u0041-\u005A\u0061-\u007A\u00C0-\u00D6"+
"\u00D8-\u00F6\u00F8-\u00FF\u0100-\u017F"+
"\u0180-\u01BF\u01C4-\u0236]"+
"$"
).test(c);
}

return function(node, index){
var rng=document.body.createTextRange()
var inWord=false;
var wordCount=0;
var wordStart=0;
var wordLength=0;
var lineOffset=0; //for Windows' \r\n
var text;

function commit(){
rng.collapse(true);
rng.moveStart("character", wordStart-lineOffset);
rng.moveEnd("character", wordLength);
rng.pasteHTML("<span class='highlight'>"+rng.text+"<\/span>");
return rng;
}

rng.moveToElementText(node);
text=rng.text;

for(var ii=0; ii<text.length; ii++){
if(isWordChar(text.charAt(ii))){
if(!inWord){
wordCount++;
inWord=true;
wordStart=ii;
wordLength=1;
}else{
wordLength++;
}
} else {
if(inWord){
inWord=false;
} else {
if(text.charAt(ii)=="\u000A"&&text.charAt(ii-1)=="\u000D"){
lineOffset++;
}
}
}

if(wordCount==index && !inWord)
return commit();
}

if(wordCount==index)
return commit();

return null;
}
})();

function test(index){
if(document.body && document.body.createTextRange)
highlightWord(document.body, +index||0);
}
</script>

<div>Watch the sparrow fall</div>
<form>
<input type="text" name="wordIndex">
<input type="button"
value="test()"
onclick="test(this.form.wordIndex.value)">
</form>
HTH
Yep.
Jul 23 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

4 posts views Thread by Bob hotmail.com> | last post: by
reply views Thread by Brian Scott | last post: by
4 posts views Thread by Patrick Porter | last post: by
7 posts views Thread by Leif902 | last post: by
14 posts views Thread by > Adrian | last post: by
reply views Thread by Scott | last post: by
reply views Thread by gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.