Удаление атрибута html из строки?

Question

У меня есть строка html, которая выглядит так:

<div id="demo_..." class="menu">

Код html доступен в виде строки. Теперь я хотел бы удалить все атрибуты id, которые начинаются с demo_. Результат должен быть таким:

<div class="menu">

Я знаю, что он должен работать с регулярными выражениями. Но я немного борюсь со специальными символами. Как должно выглядеть регулярное выражение, чтобы все строки в этом формате можно было заменить пустой строкой?

Answer 1

Вы можете использовать селектор атрибута подстроки

[att^=val] Представляет элемент с атрибутом att, значение которого начинается с префикса «val». Если «val» - это пустая строка, то селектор ничего не представляет.

[att$=val] Представляет элемент с атрибутом att, значение которого заканчивается суффиксом «val». Если «val» - это пустая строка, то селектор ничего не представляет.

[att*=val] Представляет элемент с атрибутом att, значение которого содержит хотя бы один экземпляр подстроки «val». Если "val" - пустая строка, то селектор ничего не представляет.

В вашем случае вы можете использовать

document.querySelectorAll('[id^="demo_"]')

или

document.querySelectorAll('[id*="demo_"]')

Результат будет быть массивом HTMLElement с атрибутом id, значение которого начинается с префикса demo_ или содержит demo_, если используется * вместо ^. Оттуда вы можете удалить каждый HTMLElement id att, используя метод removeAttribute(). Больше чтения от здесь .

document.querySelectorAll('[id^="demo_"]')
 .forEach(element => element.removeAttribute('id'));