JavaScript | Как преобразовать строку в HTML-элемент?

Одной командой

new DOMParser().parseFromString(ТВОЯ_СТРОКА, "text/html").getElementsByTagName("ТВОЙ_ЭЛЕМЕНТ")[0]

Рассмотрен случай преобразования готовой разметки HTML, которая лежит в JavaScript в виде строки.

ТВОЯ_СТРОКА — нужно указать свою строку

ТВОЙ_ЭЛЕМЕНТ — нужно указать HTML-элемент, который получается из строки (тот который задумывался изначально)

Пример реализации:

Пример создания HTML-элемента из строки - JavaScript
Пример создания HTML-элемента из строки — JavaScript

[0] — это значение опционально, если нужно получить какой-либо один элемент из коллекции элементов. Работает целочисленный индекс как у массивов.

Видео инструкция

В этом видео приводится пример преобразования подготовленной строки в HTML-элемент при помощи JavaScript и стандарта «DOM Parsing and Serialization«. Ввод команд осуществляется в консоль браузера Google Chrome. Результат виден сразу.

Строка до нужной строки. Или как мы пришли к этому вопросу.

Изначально была строка:

var stroka = "Скачать фото"
Переменная stroka со значением - Скачать фото - JavaScript
Переменная stroka со значением — Скачать фото — JavaScript

Мы воспользовались «Дополнительными возможностями ECMAScript для веб-браузеров«. Мы воспользовались «Дополнительными свойствами прототипа объекта String» — а именно методом link()String.prototype.link и обернули эту строку HTML-разметкой:

var newStrLink = stroka.link("efim360.ru")

Мы получили строку, которая полностью оформлена как HTML-разметка (ВНИМАНИЕ! Это строковый тип данных JavaScript. Не объект DOM интерфейса Element):

<a href="efim360.ru">Скачать фото</a>

Вывод в консоль:

Метод link прототипа String - JavaScript
Метод link прототипа String — JavaScript

Теперь нам нужно преобразовать эту строку в HTML-элемент, чтобы иметь возможность взаимодействовать как с объектом. (Доставать значения атрибутов, например из href-атрибута)

 

Решение задачи

Мы воспользуемся интерфейсом DOMParser, который описан в документе — DOM Parsing and Serializationhttps://www.w3.org/TR/DOM-Parsing/

Сначала мы создаём новый объект конструктора DOMParser. Вызываем конструктор при помощи оператора new. Не передаём никаких параметров в конструктор.

new DOMParser()

Затем у этого объекта мы обращаемся к единственному методу parseFromString:

new DOMParser().parseFromString()

Функция parseFromString() принимает два параметра:

  1. Нужная нам строка
  2. Один из пяти Mime-типов в строком виде («text/html», «text/xml», «application/xml», «application/xhtml+xml», «image/svg+xml»)

Передаём нужные параметры:

new DOMParser().parseFromString(newStrLink, "text/html")
или
new DOMParser().parseFromString(newStrLink, "text/xml")

Эта конструкция вернёт нам полноценный документ.

 

С этого момента у нас есть два пути:

  1. Использовать «text/html» (правильный)
  2. Использовать «text/xml»

 

Путь № 1 — Использовать «text/html»

Мы получаем новый документ в переменную newDoc.

var newDoc = new DOMParser().parseFromString(newStrLink, "text/html")

Вывод в консоль браузера:

DOMParser() возвращает новый документ, ссылка из строки - JavaScript
DOMParser() возвращает новый документ, ссылка из строки — JavaScript

Нам не нужен сам документ. Нам нужен элемент ссылки, который появился в этом документе.

Мы положили новый документ в переменную и теперь можем отобрать все элементы-ссылки в этом документе (по сути, мы отловим ИМЕННО НАШУ СТРОКУ, с которой начинали)

var aHColl = newDoc.getElementsByTagName("a")

В переменной aHColl будет находиться коллекция HTML-элементов <a>.

Полноценный объект ссылки - элемента a - JavaScript
Полноценный объект ссылки — элемента a — JavaScript

Под индексом 0(ноль) будет лежать та самая единственная ссылка, которую из строки мы превратили в объект. У этого объекта будут работать все ключи, которые присущи HTML-элементу <a>.

Мы без проблем сможем обратиться к ключу href и получить его полный путь:

Переменная aHColl - ключ href определён - JavaScript
Переменная aHColl — ключ href определён — JavaScript

Мы получили href. Всё работает как надо, а значит мы успешно преобразовали строку в HTML-элемент при помощи JavaScript.

 

Путь № 2 — Использовать «text/xml»

Вариант с «text/xml» вернёт нам «усечённый» документ (не будет <html><body> и <head>):

var newStrObject = new DOMParser().parseFromString(newStrLink, "text/xml")

Вывод в консоль браузера:

Усечённый документ с одним элементом - JavaScript
Усечённый документ с одним элементом — JavaScript

Из него также можно будет получить HTML-коллекцию элементов <a>. НО! ВНИМАНИЕ!

Усечённый объект ссылки - элемента a - JavaScript
Усечённый объект ссылки — элемента a — JavaScript

!!! У этого объекта не будет ключа href.

Переменная aXColl - ключ href не определён - JavaScript
Переменная aXColl — ключ href НЕ определён — JavaScript

Объект коллекции не будет содержать нужного количества ключей для своего уникального HTML-элемента. В результате может пострадать логика обработки таких элементов из строк. Будьте внимательны.

 

Ссылки

Fetch | Как получить данные? Используем JavaScript

DOM

JavaScript | Строки (String)

Стандарт — DOM — официальный документ

Стандарт — DOM Parsing and Serialization — https://www.w3.org/TR/DOM-Parsing/

 

Поделись записью