3

I need to highlight a selected text with JavaScript (no jQuery) and having control points or markers (left and right), I don't really know how to call them, similarly like on mobile phones so I can extend the selection anytime by dragging any of the control points.

Example: http://screencast.com/t/KJBdvreeVW

I've grabbed the selected text, demo: http://jsfiddle.net/henrichro/HJ482/

function getSelectionText() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    alert(text);
}

if (window.Event) document.captureEvents(Event.MOUSEUP);
document.onmouseup = getSelectionText;

Now I have this working code to get the text, but I would like to have markers around it, as written above :)

Update 10/28/2013:

After Dementic's directions (his answer below), I figured out the next working code: http://jsfiddle.net/henrichro/WFLU9/

The only problem persists when I select more than one line. On that scenario the markers are showing wrong.

  • 7
    you did not get any answers because your request is a time waster. you actually want people to write the whole code for you which can take quite some time, and just post it back as an answer for 100 points (now...) What you SHOULD do: Break the question into smaller pieces, e.g: How can i get the selected text with javascript. Then another question: How can i set markers for selected text (im not sure that is possible btw) and so on. The guys on SO will be more then happy to help if they see you are trying to do something and ask for help. – Rafael Herscovici Oct 27 '13 at 21:07
  • Thank you. Do you think it would make more sense to edit my question into: "How can i set markers for selected text"? –  Oct 27 '13 at 21:22
  • i think you should start from how to grab the selected text. then, you can ask another question saying: "I have this working code to get the text, but i would like to have markers around it", go step by step, in the process, you will learn how it works and people would be able to help with small bits of code and advice. – Rafael Herscovici Oct 27 '13 at 21:25
  • 1
    Done, thanks a lot, really appreciate giving me a direction to clarify my question :) –  Oct 27 '13 at 21:45
  • are the markers supposed to work like they do on mobiles? that is, should they be expandable? – Rafael Herscovici Oct 27 '13 at 21:49
  • Yes, first they should appear after the text is selected (start & end of selection), then if I drag any of the markers, the selection to expand or shrink, depending in which direction I'm dragging the marker. –  Oct 27 '13 at 21:57

1 Answers1

2

found a solution here : How do I wrap a text selection from window.getSelection().getRangeAt(0) with an html tag?

which uses just a bit of Jquery, modified it so its pure js (just removed the selectors and the onclick), you can find a working example here: http://jsfiddle.net/3tvSL/83/

this marks the selected text with yellow background, and will need a bit more work to have "Markers" on the sides.

as for an idea, you can use an absolute positioned div as the marker, and while it is dragged, you can use something like:

function expand(range) {
    if (range.collapsed) {
        return;
    }

    while (range.toString()[0].match(/\w/)) {
        range.setStart(range.startContainer, range.startOffset - 1);   
    }

    while (range.toString()[range.toString().length - 1].match(/\w/)) {
        range.setEnd(range.endContainer, range.endOffset + 1);
    }
}

Taken from: Select whole word with getSelection

one more thing, i have found a working js library to do exactly what you wish... http://www.mediawiki.org/wiki/Extension:MashaJS take a look :)

Community
  • 1
  • 1
Rafael Herscovici
  • 16,558
  • 19
  • 65
  • 93
  • Thank you. I'm trying to position an absolute HTML element at the beginning of the selection, but it says `TypeError: range.startContainer is not a function`. Strange since https://developer.mozilla.org/en-US/docs/Web/API/range?redirectlocale=en-US&redirectslug=DOM%2Frange –  Oct 27 '13 at 22:37
  • http://jsfiddle.net/henrichro/WFLU9/1/ - pretty close. The only problem is when more than one lines are selected. On that scenario the markers are going mad. –  Oct 28 '13 at 12:47
  • did you have a look at the link i gave at the end? – Rafael Herscovici Oct 28 '13 at 13:24
  • ok, so i think you are ready for you #2 question: "I have this code, but the markers are going mad :)" or something similar. – Rafael Herscovici Oct 28 '13 at 13:28
  • 1
    Question #2 should be: "Having the markers, now I need to drag them and expand or shrink the selection :)". But I don't have the markers yet, at least incorectly, so still working on them. –  Oct 28 '13 at 13:34
  • I have the markers working :) Should I post also here the code? The next question I will open a little bit later and the bounty will be available to approve in 2 hours. Thanks for your help. –  Oct 28 '13 at 18:16
  • im not here for the bounty, just to help. and you better create a new question if you want to get help, usually, people avoid "answered" questions. – Rafael Herscovici Oct 28 '13 at 19:15