473,320 Members | 1,572 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

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 1957
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: Bob hotmail.com> | last post by:
Everyone I have been spending weeks looking on the web for a good tutorial on how to use regular expressions and other methods to satisfy my craving for learning how to do FAST c-style syntax...
0
by: Brian Scott | last post by:
I am currently trying to control the syntax highlighting of a richtextbox control whilst the user types. At the moment I have implemented a thread which calls the richTextBox.Invoke on a method...
4
by: Patrick Porter | last post by:
Arrrgh! I have tried everything (ok, not EVERYTHING) but i cant get solve the problem of getting syntax highlighting in a rich textbox. in the code below, im attempting to highlight all of the...
7
by: Leif902 | last post by:
After much searching of google, the closest I can find is highlighting search terms... however, this is not what I wanted to do. Does anyone know how to parse through a specific element (lets say...
14
by: > Adrian | last post by:
Is there a way of stopping text from highlighting in textbox? Many thanks, Adrian.
0
by: Scott | last post by:
Hi, I think I may have finally found a IDE/text editor that I like, but, it still haves one problem. Geany haves syntax highlighting, but it is not very good for Python. It only seems to have...
1
by: thetechgeek | last post by:
Hey all, I've created a pretty nice-looking drop-down menu, and I need to prevent users form highlighting the text in the menu item, because it looks kind of ugly. Here's an snippet of my menu...
1
by: alamodgal | last post by:
hiiiiiii I have a problem in highlighting searching keyword.Actually im using this function for searching Public Function HighLight(ByVal Keyword As String, ByVal ContentFor As String) Dim...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.