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

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

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