Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Отображение HTML-тегов на странице, формуруемой js-скриптом (https://javascript.ru/forum/events/2939-otobrazhenie-html-tegov-na-stranice-formuruemojj-js-skriptom.html)

cforest 02.03.2009 11:18

Отображение HTML-тегов на странице, формуруемой js-скриптом
 
Добрый день.

Есть html-страница с формой. В форме есть textarea. В textarea пользователь может вводить текст и html-теги. Ниже формы расположена ссылка. Хочется при нажатии на эту ссылку создавать новую страницу, в которую помещать содержимое textarea. То есть, своего рода preview перед нажатием на submit.

Реализовано так:
-------- html -----------


<form action="script.php" name=first method="post">
    <textarea cols=76 rows=10 name="content"></textarea><br>
    <input type="submit" name=edit value="Apply">
</form>

<a href="#" onclick="p2();" >Preview</a>


-------- js -----------

function p2() {
	h = open("","","width=400,height=394");
	text = document.getElementsByName('content')[0].innerHTML;
	h.document.open();
	h.document.write(text); 
}


Проблема: в отображаемой html-странице теги "не резолвлятся".
Пример: пользователь набрал в textarea:
Тест. <a href="abc.html">Ссылка</a>

Ожидаемое поведение:
Тест. Cсылка.
Нынешнее поведение:
Тест. <a href="abc.html">Ссылка</a>

То есть, браузер "не понимает" теги, считая их обычными символами.
Вопрос: как сделать так, чтобы html-теги правильно интерпретировались браузером. Спасибо.

P.S. Прикол в том, что если вместо строчки
text = document.getElementsByName('content')[0].innerHTML;

я напишу
text='Тест. <a href="abc.html">Ссылка</a>';

то все отобразится правильно (теги будут интерпретированы). Но вот в исходном варианте почему-то не работает. Очень надеюсь на вашу помощь. Спасибо.

Zibba 02.03.2009 13:25

Видимо в полученной строке нужно по средством регулярных выражений искать открывающий и закрывающий тег и т.д. и интерпритировать их как
text='Тест. <a href="abc.html">Ссылка</a>'

cforest 02.03.2009 13:54

Цитата:

Сообщение от Zibba (Сообщение 13385)
Видимо в полученной строке нужно по средством регулярных выражений искать открывающий и закрывающий тег и т.д. и интерпритировать их как
text='Тест. <a href="abc.html">Ссылка</a>'

Простите, я не понял. Имхо, это не в ту сторону. Но если я не прав, сможете дать рабочий пример? Описанную проблему легко воспроизвести (код есть выше). И, соответственно, ваш пример будет легко проверить. Спасибо.

Zibba 02.03.2009 14:47

Цитата:

Сообщение от cforest
сможете дать рабочий пример

Цитата:

Сообщение от cforest
ваш пример будет легко проверить

Все оказалось еще проще чем я думал. Не сообразил сначало что в дело в innerHTML, получайте данные textarea через value и все будет ок. (пример ниже):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Tag</title>
		<script type="text/javascript">
			function p2(){
				h = open("","","width=400,height=394");
				var txt = document.getElementsByName('content')[0].value;
				
				var view = document.getElementById('view');
				
				view.style.width = '480px';
				view.style.border = 'solid 1px #ddd';
				view.innerHTML = txt;
				h.document.open();
				h.document.write(txt); 
			}
		</script>
	</head>
	<body>
		<form action="script.php" name="first" method="post">
			<textarea cols=76 rows=10 name="content"></textarea><br>
			<input type="submit" name=edit value="Apply">
		</form>
		<a href="#" onclick="p2();" >Preview</a>
		<div id="view"></div>
	</body>
</html>

cforest 02.03.2009 15:57

Zibba, работает!

Огромное спасибо за помощь!

RobinGood 14.10.2009 13:19

))) вот сегодня сталкнулся с такой же неприятностью
 
Цитата:

Сообщение от cforest (Сообщение 13392)
Zibba, работает!

Огромное спасибо за помощь!

В общем на самом деле все обстоит так - есть какой то content editor, и область где этот материал формируется. По submit формы данный контент отправляется на страницу отображения (ну и там начинаются проблемы) в связи с тем что некоторые отдельные символы обработчик считает вынужденный заменять на коды (ну эт конечно понятно почему).
узнать о них можно по ссылке http://www.w3schools.com/tags/ref_entities.asp

контент до отправки <a>маша ела кашу</a>
контент после отправки &lt;a&gt;маша ела кашу&lt;/a&gt;

в момент получения контента отправки страницей отображения html обработчик понимает что это его коды и обратно их заменяет получая <a>маша ела кашу</a> но.... данная обработка проходит только 1 раз, то есть обработчик не врубается обработать <a>маша ела кашу</a> дальше и выдать ссылку на экране (не компилит результат).

Ну можно конечно намудрить и сделать либо парсер самому либо использовать какой то временный буфер для этой &lt;a&gt;маша ела кашу&lt;/a&gt; строки - допустим hidden поле, после чего javascript обращался бы к этому полю и пулял результат этот куда либо на страницу дальше. ноо это же ужаасно.)))

Вот и хотелось бы как то облегчить задачу восстановления потока по средством javascript. Отсюда вопрос: нет ли в javascript некой функции позволяющей декодировать подобный поток в html - ну я имею ввиду на подобие к примеру функции eval()?


Часовой пояс GMT +3, время: 12:01.