OnClick select first few characters of text in div or td

[khu84]

How can we select lets say first 500 characters in a td or div by clicking a button.

Obviously it will be a function being using button's OnClick event... can anyone give code to select first 500 characters in a td preferably or div in other case.

--

Ok in this regard I found a piece of code which select the whole text in div, next step is to select a specific lets say fist 500 characters of div. This will be happening by moving the start or end points of range but not sure how, here is the code...


var textC=document.getElementById(divID);
if (document.selection)
{
var div = document.body.createTextRange();
div.moveToElementText(textC);
div.select();
}
else
{
var div = document.createRange();
div.setStartBefore(textC);
div.setEndAfter(textC);
window.getSelection().addRange(div);
alert(div.value);
}


see if someone can help moving start and end points of range... actually end point needs to be moved.

[gnp]

You can do that in two easy lines :)


function grabText( elementID, howmany )
{
var div = document.getElementById( elementID );
return div.innerHTML.substr( 0, howmany ) ;
}


take care

[khu84]

@gnp: You didn't got my point. I don't want to get the text in a variable, I just want to select(highlight) it inside the div box. So that someone just right click it and copy it, that is it.

[gnp]

Got it :)

ok .. here it goes..


function selectText(ID, start, length){


if (document.selection)
{
document.selection.empty();
var textC = document.getElementById(ID);
var div = document.body.createTextRange();
div.moveToElementText(textC);
div.setEndPoint("EndToEnd", div);
div.moveStart('character', start);
div.moveEnd('character', -(textC.innerHTML.length - start - length));
div.select();
}
else
{
window.getSelection().removeAllRanges();
var textC = document.getElementById(ID);
while ( textC.hasChildNodes() ) textC = textC.childNodes[0];
var div = document.createRange();

div.setStart(textC, start);
if (start+length > textC.length) length = textC.length - start;
div.setEnd(textC, start+length);

window.getSelection().addRange(div);
}
return false;
}


This is the basic idea ..
But two important things.
1. In IE (first case) you define the end by going backwards from the end, thus the negative number. And since we i use innerHTML to do this it means that i do not compensate for tags in that text... so the number i come up with will not be exact characters viewed by the user if there are tags inside the selected text..

2. in the rest browsers (second case) you can either only make the selection by nodes (like you had), or you can specify start & end (like i have) if and only if you are dealing with a text node.
So what do i do ? i loop trying to find the first textnode ...

that is the best i can come up with .. a bit limited albeit ..

references:
https://developer.mozilla.org/en/DOM/range
http://www.quirksmode.org/dom/intro.html#nodes
https://developer.mozilla.org/en/DOM/Selection

good luck ..

[khu84]

Many many thanks man. It look great.

I will implement the code on to the required place in web application and will come up with my feedback on this...

[khu84]

Ok for FF it works great but in IE if your string in the box is smaller than the specified characters it goes to select the next few objects.

I am going to fix it and going to paste final code here.

[khu84]

Ok finally an if in first portion fixed this and here goes the final code


function selectText(ID, start, length){


if (document.selection)
{
document.selection.empty();
var textC = document.getElementById(ID);
var div = document.body.createTextRange();
div.moveToElementText(textC);
div.setEndPoint("EndToEnd", div);
div.moveStart('character', start);
if(length>textC.innerHTML.length)
length=textC.innerHTML.length;
div.moveEnd('character', -(textC.innerHTML.length - start - length));
div.select();
}
else
{
window.getSelection().removeAllRanges();
var textC = document.getElementById(ID);
while ( textC.hasChildNodes() ) textC = textC.childNodes[0];
var div = document.createRange();

div.setStart(textC, start);
if (start+length > textC.length) length = textC.length - start;
div.setEnd(textC, start+length);

window.getSelection().addRange(div);
}
return false;
}



We reached to a very good working code, many thanks gnp.

[gnp]

Excellent !

glad it helped, and thanks for sharing the changes :)

[edit]
i think you should edit your if statement to handle the case where the start is different than 0

if(length>textC.innerHTML.length)
length=textC.innerHTML.length;
should be

if(length + start>textC.innerHTML.length)
length=textC.innerHTML.length-start;


take care

ps. and an additional tip: when you write the code tag you can type [code=javascript] and it will highlight the code according to javascript syntax, for better readability :)

[khu84]

Many thanks GNP, Nd thanks for the correction plus how to highlight the code in terms of JS script....

U Rock buddy... :)