473,381 Members | 1,543 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,381 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 1959
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...
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...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

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.