JavaScript Tutorial/DOM Node/Text Range
Содержание
Change a Text in TextRange
<source lang="javascript">
This example uses Internet Explorer ranges and will only work on Internet Explorer. <html>
<head> <title>IE Range Example</title> <script type="text/javascript"> function useRanges() { var oRange = document.body.createTextRange(); var oP1 = document.getElementById("p1"); oRange.findText("Hello"); oRange.text = "wbex.ru"; } </script> </head><body>
Hello World
<input type="button" value="Use Ranges" onclick="useRanges()" /> </body>
</html></source>
Compare the end points of the text range
<source lang="javascript">
This example only works on Internet Explorer. <html>
<head> <title>IE Range Example</title> <script type="text/javascript"> function useRanges() { var oRange1 = document.body.createTextRange(); var oRange2 = document.body.createTextRange(); oRange1.findText("B"); oRange2.findText("A"); alert(oRange1.rupareEndPoints("StartToStart", oRange2)); alert(oRange1.rupareEndPoints("EndToEnd", oRange2)); } </script> </head><body>
A B
<input type="button" value="Use Ranges" onclick="useRanges()" /> </body>
</html></source>
isEqual and inRange of a text range
<source lang="javascript">
This example only works on Internet Explorer. <html>
<head> <title>IE Range Example</title> <script type="text/javascript"> function useRanges() { var oRange1 = document.body.createTextRange(); var oRange2 = document.body.createTextRange(); oRange1.findText("Hello World"); oRange2.findText("Hello"); alert("oRange1.isEqual(oRange2): " + oRange1.isEqual(oRange2)); alert("oRange1.inRange(oRange2): " + oRange1.inRange(oRange2)); } </script> </head><body>
Hello World
<input type="button" value="Use Ranges" onclick="useRanges()" /> </body>
</html></source>
Move to element text in a text range
<source lang="javascript">
This example uses Internet Explorer ranges and will only work on Internet Explorer <html>
<head> <title>IE Range Example</title> <script type="text/javascript"> function useRanges() { var oRange = document.body.createTextRange(); var oP1 = document.getElementById("p1"); oRange.moveToElementText(oP1); alert(oRange.htmlText); } </script> </head><body>
Hello World
<input type="button" value="Use Ranges" onclick="useRanges()" /> </body>
</html></source>
Paste HTML into a text range
<source lang="javascript">
This example uses Internet Explorer ranges and will only work on Internet Explorer <html>
<head> <title>IE Range Example</title> <script type="text/javascript"> function useRanges() { var oRange = document.body.createTextRange(); var oP1 = document.getElementById("p1"); oRange.findText("Hello"); oRange.pasteHTML("wbex.ru"); } </script> </head><body>
Hello World
<input type="button" value="Use Ranges" onclick="useRanges()" /> </body>
</html></source>
Shows what happens when you try to use pasteHTML() while HTML code is selected.
This example only works on Internet Explorer.
<source lang="javascript">
<html>
<head> <title>IE Range Example</title> <script type="text/javascript"> function useRanges() { var oRange = document.body.createTextRange(); var oP1 = document.getElementById("p1"); oRange.moveToElementText(oP1);oRange.pasteHTML("
Howdy World
");} </script> </head><body>
Hello World
<input type="button" value="Use Ranges" onclick="useRanges()" /> </body>
</html></source>