<!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>
<!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>Объект не поддерживает свойство или метод "createRange"
На 9 работает как надо, но мне для IE8 надо.
]]>Тогда наверное ещё можно так ?
function test(){
var r = document.createRange();
r.setStartAfter(Ref1);
r.setEndBefore(Ref2);
r.deleteContents();
r.insertNode(document.createTextNode('test'));
}
<!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>
<!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>
document.onclick = function() {
var TextRange = document.body.createTextRange();
while (TextRange.findText("нынешний код, но не пусто (иначе будет нечего искать)")) {
TextRange.pasteHTML('<span id="idFound">новый текст, на который будут заменены все вхождения</span>');
TextRange.collapse(false);
}
}Подробности хорошо расписаны тут. Но делать так я бы не советовал. Гораздо проще (быстрее, надежнее,...) весь html текст, который предназначен для замены, заключить в теги с идентификатором id и менять его c innerHTML.
]]>Например было:
<span id='Ref1'></span>нынешний код или пусто<span id='Ref2'></span>стало:
<span id='Ref1'></span>мой новый код или стираю старый<span id='Ref2'></span>