Вы не вошли. Пожалуйста, войдите или зарегистрируйтесь.
Страницы 1
Чтобы отправить ответ, вы должны войти или зарегистрироваться
Хочется вставить код между элементами. Не могу понять как в IE 8 расположить TextRange именно между элементами.
Например было:
<span id='Ref1'></span>нынешний код или пусто<span id='Ref2'></span>стало:
<span id='Ref1'></span>мой новый код или стираю старый<span id='Ref2'></span>
Можно, например, так:
document.onclick = function() {
var TextRange = document.body.createTextRange();
while (TextRange.findText("нынешний код, но не пусто (иначе будет нечего искать)")) {
TextRange.pasteHTML('<span id="idFound">новый текст, на который будут заменены все вхождения</span>');
TextRange.collapse(false);
}
}Подробности хорошо расписаны тут. Но делать так я бы не советовал. Гораздо проще (быстрее, надежнее,...) весь html текст, который предназначен для замены, заключить в теги с идентификатором id и менять его c innerHTML.
Господа, прошу простить меня, если не разобрался в постановке задачи, но вроде бы можно проще ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=IE8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<span id='Ref1'>content of span1 </span>нынешний код или пусто<span id='Ref2'> content of span2</span>
<button onclick="test()">replace</button>
<script type="text/javascript">
function test(){
Ref1.nextSibling.data = "[замена]"
}
</script>
</body>
</html>
Не получится, "нынешний код" это не только текст, но и любой код.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=IE8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<span id='Ref1'>content of span1 </span>нынешний код или пусто<span id='Ref3'>, ещё код </span><span id='Ref4'>, и ещё код</span><span id='Ref2'> content of span2</span>
<button onclick="test()">replace</button>
<script type="text/javascript">
function test(){
document.getElementById('Ref1').nextSibling.data = "[замена]"
}
</script>
</body>
<style>
#Ref3, #Ref4 {color: green;}
#Ref1, #Ref2 {color: red;}
</style>
</html>
serzh82saratov, ах вон оно как. Тогда понятно.
Тогда наверное ещё можно так ?
function test(){
var r = document.createRange();
r.setStartAfter(Ref1);
r.setEndBefore(Ref2);
r.deleteContents();
r.insertNode(document.createTextNode('test'));
}
У меня почему то
Объект не поддерживает свойство или метод "createRange"
На 9 работает как надо, но мне для IE8 надо.
У меня ещё такой костыль, но это только если стразу после "<span id='Ref1'>content of span1 </span>" не будет пусто и будет символ но не элемент.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=IE8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<p id='con'><span id='Ref1'>content of span1 </span>нынешний код или пусто<span id='Ref3'>, ещё код </span><span id='Ref4'>, и ещё код</span><span id='Ref2'> content of span2</span></p>
<button onclick="test()">replace</button>
<script type="text/javascript">
function test(){
var rng1 = document.body.createTextRange();
rng1.moveToElementText(document.getElementById("Ref1"));
var rng2 = document.body.createTextRange();
rng2.moveToElementText(document.getElementById("Ref2"));
alert(document.getElementById("con").innerHTML);
rng1.setEndPoint("StartToStart", rng2);
rng1.moveStart("character", 1);
rng1.moveStart("character", -1);
rng1.pasteHTML("New HTML");
alert(document.getElementById("con").innerHTML);
}
</script>
</body>
<style>
#Ref3, #Ref4 {color: green;}
#Ref1, #Ref2 {color: red;}
</style>
</html>
Как вариант, можно использовать rangy
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=IE8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- rangy "https://github.com/timdown/rangy/wiki" -->
<script src="https://rawgit.com/timdown/rangy/master/lib/rangy-core.js"></script>
<style>
#Ref3, #Ref4 {color: green;}
#Ref1, #Ref2 {color: red;}
</style>
</head>
<body>
<span id='Ref1'>content of span1 </span>нынешний код или пусто<span id='Ref3'>, ещё код </span><span id='Ref4'>, и ещё код</span><span id='Ref2'> content of span2</span>
<button onclick="test()">replace</button>
<script type="text/javascript">
function test(){
var r = rangy.createRange();
r.setStartAfter(Ref1);
r.setEndBefore(Ref2);
r.deleteContents();
r.insertNode(document.createTextNode('test'));
}
</script>
</body>
</html>
Слишком громоздко, оттуда даже выдернуть что то тяжело.
serzh82saratov, а стоит ли выдёргивать ? Если вдуматься, то отсутствие createRange у document в IE8 это частный случай его (IE) ущербности. Завтра может понадобиться реализовать тоже самое под IE6 / IE7 и т.п. А значит искать новые пути подхода. А раз так, то лучше обстоятельства подогнать под удобство, чем жертвовать удобством из-за обстоятельств. Проще говоря - 158 кб (и это ещё не minified) не особо портят картину, как мне кажется. В принципе задачу можно решить и через jQuery. Там так и вообще 86 кб кода. На то он (jQuery) и делался, чтобы облегчить момент разработки. )
Ну у меня тоже частный случай, мне это надо было для одной фичи в AhkSpy, поэтому код библиотеки в общем AutoHotkey коде из-за одного пустяка на JS это слишком.
Далее оказалось что надо было это мне исключительно из за моего неправильного подхода к HTML, в итоге всё оказалось проще.
Но решение конечно интересно, если библиотеки это делают, значит оно есть, а я до него не дошёл.
Страницы 1
Чтобы отправить ответ, вы должны войти или зарегистрироваться
