Question

I’m doing some in browser editing, and I have some content that’s on the order of around 20k characters long in a <textarea>.

So it looks something like:

<textarea>
Text 1
Text 2

Text 3
Text 4
[...]
Text 20,000
</textarea>

I’d like to use jquery to trim it down when someone hits a button to chop, but I’m having trouble doing it without overloading the browser. Assume I know that the character numbers are at 16,510 – 17,888, and what I’d like to do is trim it.

I was using:

jQuery('#textsection').html(jQuery('textarea').html().substr(range.start));

But browsers seem to enjoy crashing when I do this. Alternatives?

EDIT

Solution from the comments:

 var removeTextNode = document.getElementById('textarea').firstChild;
 removeTextNode.splitText(indexOfCharacterToRemoveEverythingBefore);
 removeTextNode.parentNode.removeChild(removeTextNode);

Answer 1

Not sure about jQuery, but with plain vanilla Javascript, this can be done by using the splitText() method of the textNode object. Your <pre> has a textNode child which contains all the text inside of it. (You can get it from the childNodes collection.) Split it at the desired index, then use removeChild() to delete the part you don’t need.