Using the TextRange Object

2019-06-03 17:56:41于海丽

    var r=document.body.createTextRange();
    r.moveToPoint(window.event.x, window.event.y);
    r.expand("word");
    r.select();
    }
</script>
</HEAD>
<BODY>

<H1 id=myH1 onclick=selectMe()>Click on a word and it will highlight</H1>

</BODY></HTML>
Show Me
Creating a TextRange Object
You create a TextRange object by applying the createTextRange method to a body, textArea, or button element. You can also create a text range from a selection made by the user. The createRange method on the selection object returns a text range. You can use the same methods and properties on this range as you do for ranges created using createTextRange. 

Creating a TextRange object on the body will not include the content inside a textArea or button. Conversely, you cannot change the start or end position of a text range over the textArea or button to move outside the scope of these particular elements. Use the properties provided on each element, isTextEdit and parentTextEdit, to walk the hierarchy. If the document above contained a textArea, a createTextRange on the body object would not find the position where the user actually clicked. The following reworks the above example to handle this case. 

Hide Example

<HTML><HEAD>
<TITLE>moveToPoint Example</TITLE>
<script for=document event=onclick>
     var r
     if(window.event.srcElement.isTextEdit)
           {
            r=window.event.srcElement.createTextRange();
     }else{
            var el=window.event.srcElement.parentTextEdit;
            r=el.createTextRange();
           }
     r.moveToPoint(window.event.x, window.event.y);