SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Help : capturing user-selected text and surrounding it with SPANs

    Afternoon geniuses,

    After days of trying to make this wok myself I've finally breaking down and admitting I can't figure it out.

    What I'm looking to do is create an interface for users to highlight pieces of a text pulled from a database. When the user highlights a piece of the text, I need to wrap that selected text in a SPAN with a unique ID. Once the user has finished, they will click a "finish" button which will submit the marked-up text back to the database.

    I've produced an interface that lets me capture what text the user has highlighted, using document.selection for IE and window.getSelection for other browsers. I've identified a means to insert the SPANs that works for IE (using the pasteHTML function) but I cannot find a functional equivalent that will work in Firefox, Safari or other non-IE browsers.

    If anyone can help me, you'll be my god.

    Thanks,

    Mike McLeod

  2. #2
    SitePoint Addict miggl's Avatar
    Join Date
    Feb 2007
    Location
    Los Angeles, CA
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Think of it from a different angle:

    1) Capture the text value the user has selected, as well as the DOM object that it is in (I'm assuming you only allow the replace only within a certain div tag, or similar).
    2) Then replace the selected text in the innerHTML of the DOM object with the selected text surrounded by span tags.

    Something like this:
    Code:
    var s_selected = window.getSelection();
    var o_element = document.getElementById("my_div");
    
    o_element.innerHTML.replace(s_selected, "<span>" + s_selected + "</span>";
    This is only a rough outline, and not tested, but it should lead you in the right direction, I think. Let me know how this goes! Good luck!
    Celebrate Liberty, Freedom, and Rights at The Constitutionalist.

  3. #3
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much for your reply and willingness to help!

    I tried the code out and get no response - no highlighting but no error messages, either. I've posted my code below. Is there anything I'm doing wrong?

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    
    <script language="javascript"> 
    
    
    function catchSelection() 
    
    var s_selected = window.getSelection();
    var o_element = document.getElementById("selectable");
    
    o_element.innerHTML.replace(s_selected, "<span style='background:#FF0000'>" + s_selected + "</span>");
    }
    
    </script>
    
    
    <style type="text/css">
    
    span.highlighted {
    	background:#FF0000;
    }
    
    </style>
    
    </head>
    
    <body>
    
    <div id="text">
    
    <div id="selectable" onmouseup="catchSelection();">
    
    <p>Sed euismod arcu at tellus. In malesuada. Fusce massa magna, auctor nec, ultrices in, condimentum in, massa. Mauris eu lectus. Nam porttitor risus vel ante. Nullam sed nunc ac mi rhoncus varius. Morbi eleifend. Nulla fringilla ipsum vel ipsum. Aliquam risus dolor, malesuada non, sodales sit amet, elementum a, eros. Aenean massa felis, venenatis eget, porttitor vitae, suscipit ac, tortor. Vivamus ut urna consectetuer nisl pharetra aliquet. Praesent faucibus lobortis lacus. Ut et diam ut velit dapibus ultricies. Integer pellentesque est id neque. Nulla scelerisque lorem. Phasellus eget justo in odio aliquam convallis. Vestibulum bibendum tortor et ligula. Sed nisi nibh, tristique et, vestibulum eu, vehicula sed, elit.</p>
    
    </div>
    
    <p>In vestibulum justo a turpis. Vestibulum eget sem sed augue porta faucibus. Vivamus nec mauris a massa feugiat posuere. Vestibulum convallis posuere enim. Cras elit. Sed ac neque. Praesent eget leo. Integer convallis tempor magna. Etiam interdum molestie dolor. Nunc ac urna. Fusce dictum, nunc ut varius venenatis, ligula lorem feugiat metus, ac sodales libero lorem ut enim.</p>
    
    </div>
    
    
    <div id="displayselections">
    
    </div>
    
    
    </body>
    </html>

  4. #4
    SitePoint Addict miggl's Avatar
    Join Date
    Feb 2007
    Location
    Los Angeles, CA
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this as your function. Note that you were missing the opening brace. I also added the last line to unselect the current selection (as otherwise it would keep selecting; try commenting it out to see what I mean):
    Code:
    function catchSelection()
    {
    	var s_selected = window.getSelection();
    	var o_element = document.getElementById("selectable");
    
    	o_element.innerHTML = o_element.innerHTML.replace(s_selected, "<span style='background:#FF0000'>" + s_selected + "</span>");
    	o_element.focus();
    }
    Celebrate Liberty, Freedom, and Rights at The Constitutionalist.

  5. #5
    SitePoint Addict miggl's Avatar
    Join Date
    Feb 2007
    Location
    Los Angeles, CA
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is also one other restriction that the current code has: it will highlight the first occurence of the selected text. Try selecting only the letter a toward the end of the text, and you'll see what I mean. The code can be altered to highlight all occurence. If you need to highligh only the specfic occurrence, I will need to think about it some more, and you possible have to use a textarea field instead, so that we can work with the cursor position to determine what to highlight.
    Celebrate Liberty, Freedom, and Rights at The Constitutionalist.

  6. #6
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    GENIUS! That does exactly what I need it to. Thank you SO much, you just made my week!

    Mike

  7. #7
    SitePoint Addict miggl's Avatar
    Join Date
    Feb 2007
    Location
    Los Angeles, CA
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Glad to be of help
    Celebrate Liberty, Freedom, and Rights at The Constitutionalist.


Bookmarks

Posting Permissions

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