JavaScript Tutorial/DOM Node/Text Range

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

Change a Text in TextRange

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><p id="p1"><b>Hello</b> World</p>
        <input type="button" value="Use Ranges" onclick="useRanges()" /> 
    </body>
</html>


Compare the end points of the text range

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><p id="p1"><b>A</b> B</p>
        <input type="button" value="Use Ranges" onclick="useRanges()" />    
    </body>
</html>


isEqual and inRange of a text range

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><p id="p1"><b>Hello</b> World</p>
        <input type="button" value="Use Ranges" onclick="useRanges()" />    
    
    </body>
</html>


Move to element text in a text range

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><p id="p1"><b>Hello</b> World</p>
        <input type="button" value="Use Ranges" onclick="useRanges()" />   
    </body>
</html>


Paste HTML into a text range

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("<em>wbex.ru</em>");
            }
        </script>
    </head>
    <body><p id="p1"><b>Hello</b> World</p>
        <input type="button" value="Use Ranges" onclick="useRanges()" />  
    </body>
</html>


Shows what happens when you try to use pasteHTML() while HTML code is selected.

This example only works 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);
                oRange.pasteHTML("<P><em>Howdy</em> World</p>");
                
            }
        </script>
    </head>
    <body><p id="p1"><b>Hello</b> World</p>
        <input type="button" value="Use Ranges" onclick="useRanges()" />      
    </body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/DOM_Node/Text_Range&oldid=9283»