JavaScript Tutorial/DOM Node/Text Range — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
| |
Текущая версия на 08:24, 26 мая 2010
Содержание
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>