Как удалить теги HTML вместе с идентификатором, кроме разрешенных тегов?

Question

Вот пример текста:

"-A3-<tag1>Sale</tag1>-cum-</blockquote><p <tag1>id</tag1>=\"p_12\"> </p><p 
<tag1>id</tag1>=\"p_13\">        Gift <tag1>Deed</tag1> <tag1>executed</tag1> by C.K. Koshy 
<tag1>in</tag1> favour <tag1>of</tag1> Quilon Diocese         <tag1>and</tag1> C.K."

Мне было интересно, как я могу удалить теги <p>, теги <blockquote>, а также все id, но я хочу сохранить <tag>. Только если <tag> окружает p, blockquote или id, я хочу удалить его. Отдыхайте все время, пока оно остается. Как мне сделать это в JavaScript? Я попробовал регулярное выражение по следующей схеме:

test = test.replace(/<(?!tag\s*\/?)[^>]+>/g, '')

Это не дало удовлетворительных результатов. Вот к чему я стремлюсь (желаемый результат):

"-A3-<tag1>Sale</tag1>-cum- Gift <tag1>Deed</tag1> <tag1>executed</tag1> by C.K. Koshy 
<tag1>in</tag1> favour <tag1>of</tag1> Quilon Diocese  <tag1>and</tag1> C.K."

Как мне получить это JS?

Answer 1

Вы можете проанализировать string как HTML и использовать манипулирование DOM для удаления элементов, вот пример:

let input = `-A3-<tag1>Sale</tag1>-cum-</blockquote><p <tag1>id</tag1>="p_12"> </p><p 
<tag1>id</tag1>="p_13">        Gift <tag1>Deed</tag1> <tag1>executed</tag1> by C.K. Koshy 
<tag1>in</tag1> favour <tag1>of</tag1> Quilon Diocese         <tag1>and</tag1> C.K.`

input = input.replace(/<tag1>id<\/tag1>/g, "id");

const doc = new DOMParser().parseFromString(input, 'text/html');

doc.querySelectorAll('blockquote, p').forEach((e) => {
  [...e.childNodes].forEach(child => {
    e.before(child);
  });
  e.remove();
});

const output = doc.body.innerHTML;
console.log(output);

Для этого сначала нужно использовать некоторое регулярное выражение для преобразования исходного ввода в действительные HTML, а затем go через все элементы <blockquote> и <p> чтобы извлечь все дочерние узлы и вставить их перед родителями, после этого пустые элементы <blockquote> и <p> удаляются.

Answer 2

При работе с HTML (или любым XML) регулярное выражение никогда не является ответом. Есть слишком много ошибок.

Вместо этого вам понадобится что-то вроде jQuery или Cheerio (которое имитирует API jQuery, но содержит только средства для преобразования и манипулирования HTML без дополнительного материал), который понимает фактическую структуру. Если вы доверяете контенту, вы также можете сбросить HTML в элемент HTML с помощью innerHTML и получить к нему доступ с помощью querySelector().

Тогда это всего лишь вопрос выбора элемента (ов). ) вы не хотите и удаляете их.

Вот пример использования третьего варианта:

const content = '<p>a</p><p>b</p><tag>c</tag><tag><p>d</p></tag><blockquote>e</blockquote>';
const dummy = document.querySelector('#dummy');
const output = document.querySelector('#output');

dummy.innerHTML = content;

const toRemove = Array.from(dummy.querySelectorAll('p, tag, blockquote')).filter(el =>
  // for the "element containing certain element" you can't do that with selector along, but can with a filter method
  !(
   (el.tagName === 'P' && el.parentNode.tagName === 'TAG')
     || (el.tagName === 'TAG' && el.querySelector('p'))
  )
);

toRemove.map(el => el.parentNode.removeChild(el));

output.innerHTML = dummy.innerHTML;
dummy.innerHTML = ''; // empty it out

<div id="dummy"></div>
<div id="output"></div>