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

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)

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

Ссылка из строки на HTML-странице
Ссылка из строки на HTML-странице

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

Ссылки

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 )

 

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