1 Тема от serzh82saratov (изменено: serzh82saratov, 2017-12-04 10:00:13)

  • serzh82saratov
  • Разработчик
  • Неактивен

Тема: JS: pasteHTML между элементами

Хочется вставить код между элементами. Не могу понять как в IE 8 расположить TextRange именно между элементами.

Например было:

<span id='Ref1'></span>нынешний код или пусто<span id='Ref2'></span>

стало:

<span id='Ref1'></span>мой новый код или стираю старый<span id='Ref2'></span>
По вопросам возмездной помощи пишите на E-Mail: serzh82saratov@mail.ru
Win10x64 v20H2, AutoHotkey_L v1.1.33.09 (Unicode 32-bit). AhkSpy, Hotkey, ClockGui

2 Ответ от mozers

  • mozers
  • Разработчик
  • Неактивен

Re: JS: pasteHTML между элементами

Можно, например, так: 

document.onclick = function() {
	var TextRange = document.body.createTextRange();
	while (TextRange.findText("нынешний код, но не пусто (иначе будет нечего искать)")) {
		TextRange.pasteHTML('<span id="idFound">новый текст, на который будут заменены все вхождения</span>');
		TextRange.collapse(false);
	}
}

Подробности хорошо расписаны тут. Но делать так я бы не советовал. Гораздо проще (быстрее, надежнее,...) весь html текст, который предназначен для замены, заключить в теги с идентификатором id и менять его c innerHTML.

https://html-applications.bitbucket.io
https://scite-ru.bitbucket.io

3 Ответ от Xameleon

  • Xameleon
  • Разработчик
  • Неактивен

Re: JS: pasteHTML между элементами

Господа, прошу простить меня, если не разобрался в постановке задачи, но вроде бы можно проще ?


<!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>
Передумал переделывать мир. Пашет и так, ну и ладно. Сделаю лучше свой !

4 Ответ от serzh82saratov

  • serzh82saratov
  • Разработчик
  • Неактивен

Re: JS: pasteHTML между элементами

Не получится, "нынешний код" это не только текст, но и любой код.

<!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>
По вопросам возмездной помощи пишите на E-Mail: serzh82saratov@mail.ru
Win10x64 v20H2, AutoHotkey_L v1.1.33.09 (Unicode 32-bit). AhkSpy, Hotkey, ClockGui

5 Ответ от Xameleon

  • Xameleon
  • Разработчик
  • Неактивен

Re: JS: pasteHTML между элементами

serzh82saratov, ах вон оно как. Тогда понятно.

Тогда наверное ещё можно так ?


function test(){
	var r = document.createRange();
	r.setStartAfter(Ref1);
	r.setEndBefore(Ref2);
	r.deleteContents();
	r.insertNode(document.createTextNode('test'));
}
Передумал переделывать мир. Пашет и так, ну и ладно. Сделаю лучше свой !

6 Ответ от serzh82saratov (изменено: serzh82saratov, 2017-12-06 01:58:53)

  • serzh82saratov
  • Разработчик
  • Неактивен

Re: JS: pasteHTML между элементами

У меня почему то

Объект не поддерживает свойство или метод "createRange"


На 9 работает как надо, но мне для IE8 надо.

По вопросам возмездной помощи пишите на E-Mail: serzh82saratov@mail.ru
Win10x64 v20H2, AutoHotkey_L v1.1.33.09 (Unicode 32-bit). AhkSpy, Hotkey, ClockGui

7 Ответ от serzh82saratov

  • serzh82saratov
  • Разработчик
  • Неактивен

Re: JS: pasteHTML между элементами

У меня ещё такой костыль, но это только если стразу после "<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>
По вопросам возмездной помощи пишите на E-Mail: serzh82saratov@mail.ru
Win10x64 v20H2, AutoHotkey_L v1.1.33.09 (Unicode 32-bit). AhkSpy, Hotkey, ClockGui

8 Ответ от Xameleon

  • Xameleon
  • Разработчик
  • Неактивен

Re: JS: pasteHTML между элементами

Как вариант, можно использовать 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>
Передумал переделывать мир. Пашет и так, ну и ладно. Сделаю лучше свой !

9 Ответ от serzh82saratov

  • serzh82saratov
  • Разработчик
  • Неактивен

Re: JS: pasteHTML между элементами

Слишком громоздко, оттуда даже выдернуть что то тяжело.

По вопросам возмездной помощи пишите на E-Mail: serzh82saratov@mail.ru
Win10x64 v20H2, AutoHotkey_L v1.1.33.09 (Unicode 32-bit). AhkSpy, Hotkey, ClockGui

10 Ответ от Xameleon

  • Xameleon
  • Разработчик
  • Неактивен

Re: JS: pasteHTML между элементами

serzh82saratov, а стоит ли выдёргивать ? Если вдуматься, то отсутствие createRange у document в IE8 это частный случай его (IE) ущербности. Завтра может понадобиться реализовать тоже самое под IE6 / IE7 и т.п. А значит искать новые пути подхода. А раз так, то лучше обстоятельства подогнать под удобство, чем жертвовать удобством из-за обстоятельств. Проще говоря - 158 кб (и это ещё не minified) не особо портят картину, как мне кажется. В принципе задачу можно решить и через jQuery. Там так и вообще 86 кб кода. На то он (jQuery) и делался, чтобы облегчить момент разработки. )

Передумал переделывать мир. Пашет и так, ну и ладно. Сделаю лучше свой !

11 Ответ от serzh82saratov

  • serzh82saratov
  • Разработчик
  • Неактивен

Re: JS: pasteHTML между элементами

Ну у меня тоже частный случай, мне это надо было для одной фичи в AhkSpy, поэтому код библиотеки в общем AutoHotkey коде из-за одного пустяка на JS это слишком.
Далее оказалось что надо было это мне исключительно из за моего неправильного подхода к HTML, в итоге всё оказалось проще.
Но решение конечно интересно, если библиотеки это делают, значит оно есть, а я до него не дошёл.

По вопросам возмездной помощи пишите на E-Mail: serzh82saratov@mail.ru
Win10x64 v20H2, AutoHotkey_L v1.1.33.09 (Unicode 32-bit). AhkSpy, Hotkey, ClockGui