JavaScript | Текст в HTML-ссылку в виде строки — efim360.ru

JavaScript | Текст в HTML-ссылку в виде строки

Стандарт ECMAScript позволяет любой текст превратить в строковое представление HTML-элемента ссылки <a>. Для этого есть специальное свойство String.prototype.link(url).

Дополнительный метод String.prototype.link ( url ) для класса String - ECMAScript (JavaScript)
Дополнительный метод String.prototype.link ( url ) для класса String - ECMAScript (JavaScript)

JavaScript работает на стандарте ECMAScript, а это значит, что в JavaScript это работает точно так же.

 

Как это работает?

У нас есть текст в виде строкового типа данных (String):

let stroka = 'Скачайте файл по ссылке. Размер 10 мегабайт.'

stroka.constructor.name
'String'
Объявили строку с типом String - JavaScript
Объявили строку с типом String - JavaScript

Мы хотим обернуть этот текст HTML-разметкой - получить строковое представление HTML-элемента <a>. У элемента будет сразу записано значение атрибута href, которое будет URL-адресом. Этот адрес мы будем передавать в метод link() в качестве аргумента.

Вызываем метод link() на объекте строки, передаём URL:

stroka.link("https://efim360.ru")
Обернули строку HTML-разметкой элемента ссылки A и указали атрибут HREF - JavaScript
Обернули строку HTML-разметкой элемента ссылки A и указали атрибут HREF - JavaScript

 

Внимание ! ! !

В ответ мы получаем СТРОКОВЫЙ ТИП ДАННЫХ - НЕ узел DOM. Эту строку уже можно вывести в текущую страницу документа. Но!

Для правильного взаимодействия с этой строкой, её лучше всего преобразовать в узел объектной модели документа. Как это сделать читайте в другой публикации.

 

Информационные ссылки

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

JavaScript | Строки (String)

Стандарт ECMAScript - https://tc39.es/ecma262/multipage/

Стандарт ECMAScript - Раздел "B.2.2.10 String.prototype.link ( url )" - https://tc39.es/ecma262/multipage/additional-ecmascript-features-for-web-browsers.html#sec-string.prototype.link