JavaScript | Как создать ссылку из строки?

Теория

В стандарте ECMAScript есть раздел B — «Additional ECMAScript Features for Web Browsers» (Дополнительные возможности ECMAScript для веб-браузеров). В нём есть подраздел B.2.3 — «Additional Properties of the String.prototype Object» (Дополнительные свойства прототипа объекта String).

В подразделе перечислены дополнительные методы, с которыми JavaScript может работать в браузере со строковым типом данных. Большинство этих методов используют абстрактную операцию «CreateHTML» — по сути оборачивают строку нужной HTML-разметкой.

Для создания ссылок из строк используется дополнительный метод «link(url)«. Подраздел B.2.3.10 String.prototype.link ( url )

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

В этом видео приводится пример создания ссылки из строки при помощи JavaScript. Ввод команд осуществляется в консоль браузера Google Chrome. Результат виден сразу.

Практика

Объявим строку и присвоим ей переменную (сохраним в переменную):

var stroka = "Скачать фото"

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

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

Воспользуемся дополнительным методом «link(url)» и обернём данную строку HTML-элементом <a>:

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

В качестве параметра url мы передали строковое значение:

efim360.ru

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

Строку обернули ссылкой и указали атрибут href - JavaScript — Строку обернули ссылкой и указали атрибут href — JavaScript

Теперь мы обернули строку «Скачать фото» ссылкой и указали HTML-атрибут href. Но это по-прежнему строка JavaScript (не объект элемента).

Превращение строки в элемент

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

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

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

Преобразование строки с разметкой в объект с элементом HTML - JavaScript — Преобразование строки с разметкой в объект с элементом HTML — JavaScript

Например теперь мы можем легко получить значение нужного нам атрибута:

Получение значений из HTML-атрибутов - объект JavaScript — Получение значений из HTML-атрибутов — объект JavaScript

Вывод строки на страницу

Можно вывести результат работы на страницу текущего документа:

document.write(newStrLink)

Результат вывода:

Мы успешно вывели созданную из строки ссылку на текущую страницу в браузере.

Ссылки

JavaScript | Строки (String)

Стандарт DOM — Интерфейс Document — атрибут documentElement

Стандарт ECMAScript — Additional ECMAScript Features for Web Browsers

Стандарт ECMAScript — Additional Properties of the String.prototype Object

Стандарт ECMAScript — String.prototype.link ( url )