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

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 Serialization - https://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/