ansaurus

Question

selecting text by ignoring inner Elements of div tag javascript

Answer 1

+1 A:

First, you don't have a Doctype specified, so all browsers will render your page in quirks mode, which is most likely not what you want.

Second, the language attribute of <script> elements is deprecated. When using HTML 5 Doctype, you can omit the type attribute as text/javascript will be taken as the default.

And now for the real question: you're trying to select e.g. character 1 to 10 of your text. But when using Range.setStart and .endStart, the first parameter is the text node containing your text. If you browse through the DOM with Firebug (or Web Inspector), you'll notice that character 10 of your text resides in another element (the  element), with its own text node.

BTW, you left out several required elements/tags, which can also be a source of errors.

My corrected version reads

<!DOCTYPE html>
<html>
<head>
  <title>Title element is required</title>
<body>
<script>
function getSelectionHTML()
{
    var div = document.getElementById("myDiv");
    var bEl = document.getElementById("bEl");

    if (document.createRange) {.
        var textNode=div.firstChild;
        var rangeObj=document.createRange();
        rangeObj.setStart(textNode,0);
        rangeObj.setEnd(bEl.firstChild,2);
        alert(rangeObj.toString());
//        div.innerHTML = div.innerHTML.replace(rangeObj.toString(), '<span style="background-color: lime">'+rangeObj.toString()+'</span>');
    }
}
</script>
<div id="myDiv">
asdf as<b id="bEl">dfas df asf asdf sdfjk  dvh a sjkh jhcdjkv</b> iof scjahjkv ahsjv hdjk biud fcsvjksdhf k
</div>
<form name="aform">
  <input type="button" value="Get selection" onclick="getSelectionHTML()">
</form>
</body>
</html>

Now rangeObj contains the selected text, but you can't simply insert a  element the way you tried, because elements can't be nested this way:

<span>asdf as<b>dfa</span>s df asf…

Marcel Korpel 2010-06-01 13:54:14

but this is the static solution, there may be bold or may b not. there may be any other tag in it. I asked ignoring inner elements.

sugar 2010-06-01 13:57:52

if u r saying it can't be nasted - then how is this possible ? theSelection = document.selection.createRange().htmlText;document.selection.createRange().pasteHTML("" + theSelection + "");

sugar 2010-06-01 14:07:20

@sugar: I already feared that you wanted this to work in every situation, no matter whether there are inner elements or not. Unfortunately, you can't simply ignore them. You'll have to count the number of characters in the parent element, then traversing the DOM to count the number of characters in every child, till you have the number of characters you want.

Marcel Korpel 2010-06-01 14:56:19

@sugar: Regarding your second comment: you'll have to almost parse the HTML you encounter and create inner spans in every element (so nesting them properly), like `blablablabla`.

Marcel Korpel 2010-06-01 14:58:34

@Marcel - watch this question. It has directly applied span tag to selected text - http://stackoverflow.com/questions/2887101 - how's that possible ?

sugar 2010-06-02 06:42:25

sugar: the answer to that question works by traversing the text nodes within the selected range and surrounding each with a span.

Tim Down 2010-06-04 11:23:07

@sugar: Indeed (added comment to notify OP).

Marcel Korpel 2010-06-04 12:35:59

Answer 2

+2 A:

This is much easier in IE using TextRange, which is based around characters, words and sentences rather than nodes and offsets. In non-IE browsers, you'll need to do tedious manual traversal of text nodes in the DOM. However, even if you were to do this to get the first ten text characters within your <div> (which would be "asdf asdfa"), your strategy is flawed because you're using a replacement on innerHTML, which would try and fail to find "asdf asdfa" (innerHTML would start with "asdf asdfa", or possibly "asdf as", depending on browser).

What I would suggest is doing the DOM traversal to find all text nodes within the <div> and surrounding the parts of the text nodes you need with s, thus avoiding Ranges altogether and therefore making this work in all major browsers.

Tim Down 2010-06-01 13:59:29

Answer 3

A:

hi thanks that you tried to help me but sorry to say that it did not work?it is showing page error

Aradhana Singh 2010-10-14 09:06:45

ansaurus

tags:

views:

answers:

selecting text by ignoring inner Elements of div tag javascript

related questions