Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Замена данных в html используя xml (https://javascript.ru/forum/jquery/64613-zamena-dannykh-v-html-ispolzuya-xml.html)

dima85 25.08.2016 09:02

Замена данных в html используя xml
 
В переменной data, хранится html блок:
<div>
 <h5>тест</h5>
 <div>{time}</div>
 <a href="{ip}">Страница</a>
</div>


В переменной xml хранится:
<?xml version='1.0'?>
<new><time>10.00</time><ip>127.0.0.1</ip></new>


Нужно смотреть {*} в data, они равный данным с xml и вставить эти данные в data. Подскажите пожалуйста как это сделать.

Должно получится так:
<div>
 <h5>тест</h5>
 <div>10.00</div>
 <a href="127.0.0.1">Страница</a>
</div>

dima85 25.08.2016 11:02

Вот такой вариант ищет и заменяет {ip}
$(xml).find('ip').each(function(){
var text=$(this).contents().eq(0).text();
var new_string = data.replace('{ip}',text);
alert(new_string);
 });


Подскажите пожалуйста как сделать цикл, который будит искать все {*}

Strongman 25.08.2016 11:19

Тег <ip> существует?

dd_smol 25.08.2016 11:46

Цитата:

Сообщение от Strongman (Сообщение 426583)
Тег <ip> существует?

Это не HTML а XML в нем нет определенных тегов их разрабочек добавляет сам.

dd_smol 25.08.2016 11:49

Автору темы могу посоветовать воспользоваться готовым решение, а не изобретать велосипед при том что их уже изобретено не мало. https://learn.javascript.ru/templates

dima85 25.08.2016 13:45

Сделал велосипед :)

var new_string;
      var $kids = $(xml).find("new").children();
       $kids.each(function(){
       var tagName=this.tagName;
       var cols = $(xml).find(tagName).contents().eq(0).text();
       new_string = data.replace(new RegExp('{'+tagName+'}', 'g'),cols);
       data = new_string;
      });



Все работает! Хочу попробовать попытается избавится от jquery и написать на чистом JavaScript помогите пожалуйста.

Начал делать, но появляются ошибки:
SyntaxError: An invalid or illegal string was specified
var elements = document.querySelectorAll(kids);

var new_string;
      var $kids = data2.querySelector('new').childNodes; //Возможно тут не правильно
      var elements = document.querySelectorAll($kids);
      Array.prototype.forEach.call(elements, function(){
       var tagName=this.tagName;
       var cols = $(data2).find(tagName).contents().eq(0).text(); //Не знаю как это сделать
       new_string = data.replace(new RegExp('{'+tagName+'}', 'g'),cols);
       data = new_string;
      });

dd_smol 26.08.2016 09:59

Вариантов много.

Можно так:
var
	html	= '<div><h5>тест</h5><div>{time}</div><a href="{ip}">Страница</a></div>',
	xml		= '<?xml version="1.0"?><new><time>10.00</time><ip>127.0.0.1</ip></new>',
	parse	= new window.DOMParser(),
	docXML	= parse.parseFromString(xml, 'application/xml');

[].slice.call( docXML.documentElement.children ).forEach(function ( el ) {
	html = html.replace( new RegExp('{' + el.tagName + '}', 'g'), el.textContent );
});

Или так:
var 
	xml		= '<?xml version="1.0"?><new><time>10.00</time><ip>127.0.0.1</ip></new>',
	html 	= '<div><h5>тест</h5><div>{time}</div><a href="{ip}">Страница</a></div>';

html = html.replace(/\{([a-z]*)\}/gi, function ($0, $1) {
	return xml.match( new RegExp('<' + $1 + '>(.*)</' + $1 + '>') )[1].trim();
});


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