Скрипт перестаёт работать если есть якорь в контенте, как исправить?

Question

[Дмитрий]

Всем привет!

Есть скрипт, обрабатывает все ссылки внутри тега с классом link-add

const links = document.querySelectorAll('.link-add a');
const url = 'http://test.ru/dwxl/?url='

Array.from(links)
    .filter(link => link.getAttribute('href').startsWith('http'))
    .forEach(link => link.href = url + link.href);

Но если в контенте я использую якорь такого типа
<a id="ram1"></a>
Скрипт перестаёт работать.

Подскажите пожалуйста, что нужно дописать в скрипт, чтобы исправить данную ситуацию ?

Comments

[Ankhena]

Не используйте такие якоря. id якорей добавляются к секция, дивам и т.д.

Ссылка это переход куда-то. А у вас получается неверное использование тега a.

<a href="#anchor">Перейти к секции</a>
<section id="anchor">
...
</section>

[Дмитрий]

Ankhena, если якорь использовать в любом другом теге, то да, всё работает корректно. Просто в редакторе TinyMCE якорь используется как ссылка, так его видно в редакторе и легко найти, иначе нужно руками прописывать якорь - наверное так и буду делать.

Answer 1

[Роман Дворянов]

Когда в массив попадает ссылка-якорь, у которой нет атрибута href, ваш код падает на этом месте
link.getAttribute('href').startsWith('http')
Потому что не может сделать метод startsWith у нуля, т.к. атрибут href у такой ссылку null.
Что бы избежать подобной ситуации проверяйте есть ли у ваших ссылок такой атрибут

так

const links = document.querySelectorAll('.link-add a[href]');
const url = 'http://test.ru/dwxl/?url='

Array.from(links)
    .filter(link => link.getAttribute('href').startsWith('http'))
    .forEach(link => link.href = url + link.href);

или так

const links = document.querySelectorAll('.link-add a');
const url = 'http://test.ru/dwxl/?url='

Array.from(links)
    .filter(link => link.getAttribute('href') && link.getAttribute('href').startsWith('http'))
    .forEach(link => link.href = url + link.href);

А по хорошему, как уже писали в комментариях - не используйте ссылки без атрибута href, но я так понимаю это специфика плагина

Comments

[Дмитрий]

Спасибо, работает! Да, Вы правы, это особенность плагина редактора TinyMCE, когда создаёшь якорь, то потом его можно выбрать когда создаёшь ссылку.