Selecting parts of div text via the code

Question

Is it possible to select specific text inside a div using the code. I have a div of text, and I need to iterate through each word selecting it individually, then deslecting and onto the next word.

I'm not talking about simulating a select by changing the background css of the words requiring highlighting, but actually selecting it so the outcome is the same as if the user used the mouse to select it.

I know it's possible inside a text area input, but is it possible on a Div?

------------------------UPDATE------------------------------------------

Ok this is where I'm at with it after having another look at it today. I can select all the text in a span, but not specifically a range of words within that span. The closest I have come ( code shown below... ) is selecting the range manually, then removing the selection, then reapplying it.

<div contentEditable = 'true' id="theDiv">
A selection of words but only from here to here to be selected
</div>
<script type="text/javascript"> 
setInterval( function() {
    var currSelection = window.getSelection();
    var storedSelections = [];

    if ( currSelection ) {
        for (var i = 0; i < currSelection.rangeCount; i++) {
            storedSelections.push (currSelection.getRangeAt (i));
        }
        currSelection.removeAllRanges ();
    }

    if ( storedSelections.length != 0 ) {
        currSelection.addRange( storedSelections[0] )
    } 
}, 1000 );
</script>

The stored selection range object has a startOffset and endOffset property. My question is how do I set this alongside the initial selection via the code ( not via a mouse select ) ?

What are you attempting to do? Provide a little bit more info about what you want the outcome to be. — Tabetha Moe, Jul 19 '15 at 01:38
It's definitely possible because HTML editors us DIVs in combination with 'contenteditable' to achieve things that relate to what you're trying to do (assumption here). — bart, Jul 19 '15 at 01:41
What browsers do you care about? The Selections API allows this but it's not supported by IE (Edge will have it) — dmeglio, Jul 19 '15 at 01:46
Yes I looked into contenteditable in the hope it would allow the div to function like a text area but it didn't unfortunately. — Michael, Jul 19 '15 at 01:46
Apparently document.execCommand('copy') is supported by most current browsers. Scroll down to the answer with 70 upvotes for this question: http://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript — m69 ''snarky and unwelcoming'', Jul 19 '15 at 01:48
https://developers.google.com/web/updates/2015/04/cut-and-copy-commands?hl=en — m69 ''snarky and unwelcoming'', Jul 19 '15 at 01:48
Thanks for that but it doesn't shed any light on how to select specific words in a div. — Michael, Jul 22 '15 at 13:25

score 0 · Answer 1 · edited May 23 '17 at 12:14

0

Please read this article, it's difficult to summarise, so better read it:

http://www.quirksmode.org/dom/range_intro.html

This answer here can be useful too:

Can you set and/or change the user’s text selection in JavaScript?

edited May 23 '17 at 12:14

Community

1
1

answered Jul 19 '15 at 01:48

Reflective

3,100
1
10
21

As much as I like PPK, that Quirksmode article appears to be very old; I'm not sure of how much use it still is today. – m69 ''snarky and unwelcoming'' Jul 19 '15 at 01:53
Well, I think at least he'll get some ideas on how this works and what should he look further – lockedz Jul 19 '15 at 06:13
Unfortunately the quirksmode didn't provide an answer. The method it suggested to set a range of text didn't work. – Michael Jul 22 '15 at 12:35

Michael · Answer 2 · 2015-07-22T15:25:25.720

0

Turns out it's fairly straightforward...

<div id = "theDiv">adsf asdf asdf asdf</div>

<script type="text/javascript">
    var theDiv = document.getElementById('theDiv')
    theDivFirstChild = theDiv.firstChild;
    var range = document.createRange();
    range.setStart( theDivFirstChild, 2 );
    range.setEnd( theDivFirstChild, 8);
    window.getSelection().addRange(range);
</script>

edited Jul 22 '15 at 15:25

answered Jul 22 '15 at 15:16

Michael

59
7

Selecting parts of div text via the code

2 Answers2