Highlighting Text.

Discussion in 'Javascript' started by Adelson Anton, May 28, 2004.

  1. 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.
     
    Adelson Anton, May 28, 2004
    #1
    1. Advertising

  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.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
     
    Thomas 'PointedEars' Lahn, May 29, 2004
    #2
    1. Advertising

  3. 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
     
    Thomas 'PointedEars' Lahn, May 29, 2004
    #3
  4. > // highlight second word

    Well, this is the bit I was actually asking for. Thanks though.
     
    Adelson Anton, May 29, 2004
    #4
  5. 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
     
    Thomas 'PointedEars' Lahn, May 29, 2004
    #5
  6. 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.
     
    Yann-Erwan Perio, May 29, 2004
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Alan Cantor

    Code Text Highlighting Question

    Alan Cantor, Oct 7, 2003, in forum: ASP .Net
    Replies:
    0
    Views:
    477
    Alan Cantor
    Oct 7, 2003
  2. JemPower

    Highlighting text

    JemPower, Oct 31, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    333
    Natty Gur
    Nov 2, 2003
  3. Xavier Bourguignon

    input text highlighting problem

    Xavier Bourguignon, Oct 29, 2003, in forum: HTML
    Replies:
    7
    Views:
    982
  4. Ed
    Replies:
    1
    Views:
    388
    John Hosking
    May 16, 2007
  5. Aria
    Replies:
    3
    Views:
    107
    Janwillem Borleffs
    Oct 13, 2005
Loading...

Share This Page