Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9

Thread: Text Wrapper

  1. #1
    New Coder
    Join Date
    Mar 2009
    Posts
    45
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Text Wrapper

    Hi guys,

    I have this code whereby the user can select any text and when a button is clicked, the textcolor background changes. However, I noticed a small issue with my code: it highlights the first occurence of the selected word/s. In other words, if I highlight the word "the cat" and call the function, it will change the text color background of the first instance of the sentence "the cat" in the document it finds.
    Can someone please help me out?
    Also it only seems to highlight just plain text on web page.

    function highlight()
    {

    var workArea = "";
    workArea = content.document.getElementsByTagName('body')[0];
    var openTag = '<span style="background-color:'red'>';
    var closeTag = '</span>';
    workText = content.getSelection().getRangeAt(0);
    var currReplace = new RegExp("("+workText+")");
    workArea.innerHTML = workArea.innerHTML.replace(currReplace, openTag+"$1"+closeTag);

    }


    thanks once again
    kind regards

    Chris

  • #2
    Regular Coder Actinia's Avatar
    Join Date
    Feb 2007
    Location
    Essex, UK
    Posts
    250
    Thanks
    1
    Thanked 23 Times in 22 Posts
    Your script is doing exactly what you ask it to. The line
    Code:
    workText = content.getSelection().getRangeAt(0);
    selects the text you highlight ("the cat"), then the line
    Code:
    workArea.innerHTML = workArea.innerHTML.replace(currReplace, openTag+"$1"+closeTag);
    looks for that text within workArea (your <body>) and replaces it. It does not look just at your selection, but the body as a whole.

    You need to identify the selected area more precisely. As it stands, it will only work if the text you want to change is the first (or only) instance.

    If we knew more precisely why you were doing this, we could perhaps be more helpful.

    John

  • #3
    New Coder
    Join Date
    Mar 2009
    Posts
    45
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks alot Actinia,

    I am inserting this script on any web page I access through a Mozilla firefox extension. So basically that script would work on any web page. How can i identify the text selected?


    thanks again

    chris

  • #4
    New Coder
    Join Date
    Mar 2009
    Posts
    45
    Thanks
    3
    Thanked 0 Times in 0 Posts
    any ideas? anyone?

  • #5
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    To make a JS RegExp match more than one instance of your search in a string, you'd need to make it global... i.e:

    Code:
    var currReplace = new RegExp("/"+workText+"/g");
    Try it, see how that goes for you.
    The way to success is to assume that there are no impossible things. After all, if you think something is impossible, you will not even try to do it.

    How to ask smart questions?

  • #6
    New Coder
    Join Date
    Mar 2009
    Posts
    45
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks for your input Eldarrion but I dont want it to match any instance of that string, I want to match just that string!

  • #7
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    Quote Originally Posted by csam0003 View Post
    Thanks for your input Eldarrion but I dont want it to match any instance of that string, I want to match just that string!
    You yourself are asking for something that will match more than one 'occurrence' of your own string... and what I'm offering does do exactly that. It won't match anything but the string you give it to match... but it will look for it more than once rather than matching once and stopping there. Am I misunderstanding your desire here or something?
    The way to success is to assume that there are no impossible things. After all, if you think something is impossible, you will not even try to do it.

    How to ask smart questions?

  • #8
    New Coder
    Join Date
    Mar 2009
    Posts
    45
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi Eldarrion ,

    Thanks for your replies. I think I wasn't that clear. for example assume I have the following text:

    "The cat and the dog ran out of the house and never came back. The cat and the dog lived with me for several years."

    If I highlight the second phrase "The cat and the dog" (in bold), and call the wraptext function as displayed in the first post, the first phrase gets highlighted (in italic).


    Thanks

    Chris

  • #9
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,190
    Thanks
    10
    Thanked 569 Times in 550 Posts
    you don't want to use a regexp or a string replace at all.

    what you need to do is more complex.
    a selection could span multiple tags, or part of a tag.
    You can only style a whole tag at a time.
    so, basically, you need to wrap tags around the ends, and find every tag in the middle of the selection.

    one you have a list of all the tags involved in the selection (including the new ones at the end), you can style each tag on the list however you want.

    selection APIs vary between IE and others, and it's a bit of a pain to work with.

    you might be able to search around for "dom javascript selection" and find the pieces of code you need to string together to make it work correctly.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •