JavaScript Tutorial/DOM Node/Text Range

Материал из Web эксперт
Перейти к: навигация, поиск

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>