Избавляемся от jquery и пишем все на чистом JavaScript

@Dima84 · Регистрация: 23.02.2013

Студворк — интернет-сервис помощи студентам

Сделал велосипед, В переменной data, хранится html блок:

Code
1
2
3
4
5
    <div>
     <h5>тест</h5>
     <div>{time}</div>
     <a href="{ip}">Страница</a>
    </div>

В переменной xml хранится:

Code
1
2
<?xml version='1.0'?>
<new><time>10.00</time><ip>127.0.0.1</ip></new>

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

Code
1
2
3
4
5
6
7
8
    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);
Первые попытки:

Code
1
2
3
4
5
6
7
8
9
    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;
          });

@gooseim · 26.08.2016, 00:54

data2 это что такое?

Добавлено через 7 минут

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
        var data = `<div>
            <h5>тест</h5>
            <div>{time}</div>
            <a href="{ip}">Страница</a>
        </div>`;
 
        var xml = `<?xml version='1.0'?>
                <new><time>10.00</time><ip>127.0.0.1</ip></new>`;
 
        var parser = new DOMParser();
        var xml = parser.parseFromString(xml, "text/xml");
 
        var new_string;
        var $kids = xml.getElementsByTagName("new")[0].childNodes;
        [].forEach.call($kids, (el) => {
           var tagName = el.tagName;
           var cols = xml.getElementsByTagName(tagName)[0].textContent;
           new_string = data.replace(new RegExp('{'+tagName+'}', 'g'), cols);
           data = new_string;
        });

@Dima84 · 26.08.2016, 08:26 **[ТС]**

Спасибо, получилось.

Новые блоги и статьи Все статьи Все блоги /
Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .
Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .

@Dima84 0 / 0 / 0 Регистрация: 23.02.2013 Сообщений: 24
	26.08.2016, 08:26 [ТС]
	Спасибо, получилось. 0

Избавляемся от jquery и пишем все на чистом JavaScript

Решение