JavaScript | Как удалить ссылку, но оставить её innerText?

Как очистить текст от ссылки?

Есть разметка:

<p>Сегодня холодная погода. Самое время <a href="https://efim360.ru">купить тёплые ботинки</a> и отправиться гулять в парк.</p>

Мы хотим очистить текст — хотим убрать HTML-элемент <a>, который оборачивает фразу «купить тёплые ботинки».

Разметка с одним параграфом - JavaScript — Разметка с одним параграфом — JavaScript

В чём суть задачи?

По сути, нам нужно заменить innerHTML на innerText. Вот и всё!

Простое решение — примитивным способом

Сначала получаем нужный нам параграф — элемент . В этом примере он всего один. Это сделано для простоты.

Обращаемся к документу. Получаем HTML-коллекцию элементов . Извлекаем первый элемент .

document.getElementsByTagName("p")[0]

Получение единственного параграфа - JavaScript — Получение единственного параграфа — JavaScript

Теперь мы можем присвоить нужный нам innerHTML

document.getElementsByTagName("p")[0].innerHTML = document.getElementsByTagName("p")[0].innerText

Команда выглядит громоздко, хотя просто меняет разметку на текст.

Удаление ссылки из текста - JavaScript — Удаление ссылки из текста — JavaScript

Почему это решение «примитивное»? Потому что оно сбросит любую HTML-разметку, которая есть внутри элемента  — не только ссылку.

Правильное решение!

По факту нам нужно написать функцию, которая будет доставать из ссылки её innerText и возвращать обратно на нужное место.

Подход к решению задачи такой:

Получаем innerHTML параграфа — это будет строка. (получаем innerHTML родителя ссылки)
Получаем outerHTML ссылки — это будет строка. Это будет разметка элемента <a> в виде строки
Получаем innerText ссылки. Результат будем подставлять вместо outerHTML ссылки.
Вычитаем строку из строки и заменяем «внутренним текстом ссылки». То есть вычитаем «outerHTML ссылки» из «innerHTML параграфа» и заменяем на «innerText ссылки» — это будет строка. То есть вычитаем «outerHTML ссылки» из «innerHTML родителя» ссылки и заменяем на «innerText ссылки» — это будет строка.
Устанавливаем для innerText параграфа значение вычитания/замены. То есть устанавливаем для innerText родителя ссылки значение вычитания/замены.

Шаг № 1

var a = document.getElementsByTagName("a")[0].parentElement.innerHTML

innerHTML родителя ссылки - JavaScript — innerHTML родителя ссылки — JavaScript

Мы получили разметку, которая заключена между открывающим и закрывающим тегами элемента

Шаг № 2

var b = document.getElementsByTagName("a")[0].outerHTML

Получение разметки ссылки - JavaScript — Получение разметки ссылки — JavaScript

Мы получили полную разметку элемента <a> в виде строки.

Шаг № 3

var c = document.getElementsByTagName("a")[0].innerText

Получение innerText ссылки - JavaScript — Получение innerText ссылки — JavaScript

Нам вернётся текст в виде строки. Никакой разметки т. к. этот текст изначально обёрнут ссылкой.

Шаг № 4

var d = a.replace(b, c)

Заменили строку ссылкой на строку с innerText - JavaScript — Заменили строку ссылкой на строку с innerText — JavaScript

Мы воспользовались методом replace() объектов-прототипов String. В строке A мы нашли строку B и заменили её на C. Результат замены сохранили в D.

Шаг № 5

Почти готово. Что мы имеем на данный момент? Все строки получены, а значит теперь можно ПРИСВАИВАТЬ итоговую строку для innerHTML родителя

Все строки получены - JavaScript — Все строки получены — JavaScript

document.getElementsByTagName("a")[0].parentElement.innerHTML = d

На этом шаге мы ещё сможем выполнить команду замены innerHTML родителя. Только один раз т. к. ссылка ещё существует.

innerHTML родителя заменён на строку - JavaScript — innerHTML родителя заменён на строку — JavaScript

После изменения родителя ссылка пропадает, а значит команда больше не найдёт нужного элемента <a>

Ссылки больше нет, а с ней нет и её родителя - JavaScript — Ссылки больше нет, а с ней нет и её родителя — JavaScript

Задача выполнена успешно. Ссылка исчезла, а её текст остался.

Функция с переменными

function clearLink (link){
   var a = link.parentElement.innerHTML
   var b = link.outerHTML
   var c = link.innerText
   var d = a.replace(b, c)
   link.parentElement.innerHTML = d
}

Работа функции очистки от ссылки с переменными - JavaScript — Работа функции очистки от ссылки с переменными — JavaScript

Функция в одну строку

function clearLink (link){
   link.parentElement.innerHTML = link.parentElement.innerHTML.replace(link.outerHTML, link.innerText)
}

Работа функции очистки от ссылки в одну строку - JavaScript — Работа функции очистки от ссылки в одну строку — JavaScript

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

JavaScript | Как вычесть строку из строки?

JavaScript | Как получить родителя?

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