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

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

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

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

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

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

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

 

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

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

 

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

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

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

document.getElementsByTagName("p")[0]
Получение единственного параграфа - JavaScript
Получение единственного параграфа — JavaScript

 

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

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

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

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

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

 

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

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

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

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

Шаг № 1

var a = document.getElementsByTagName("a")[0].parentElement.innerHTML
innerHTML родителя ссылки - JavaScript
innerHTML родителя ссылки — JavaScript

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

 

Шаг № 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-элементов из документа?