Убрать тег из текста (в React JS)

Question

У меня есть несколько целых HTML-кодов в переменной cleanHTML , и мне нужно убрать определенные теги из текста.

let cleanHTML = document.documentElement.outerHTML

это:

<span class="remove-me">please</span>
<span class="remove-me">me too</span>
<span class="remove-me">and me</span>

к этому:

please
me too
and me

Я пытаюсь сделать это с:

var list = cleanHTML.getElementsByClassName("remove-me");
var i;
for (i = 0; i < list.length; i++) {
  list[i] = list[i].innerHTML;
}

Но я получаю ошибку от React cleanHTML.getElementsByClassName не является функцией

Есть идеи, как это сделать так, как нравится React?

Answer 1

Ваш cleanHtml является строкой, а не узлом. Так что getElementsByClassName не применяется, так как это не строковая функция

Вы можете использовать регулярные выражения для этого. Следующий код может помочь.

var stripedHtml = cleanHtml.replace(/<[^>]+>/g, '');

И stripedHtml будет иметь ваш HTML-контент без тегов.

Answer 2

Я предполагаю из вашей спецификации, что ваш cleanHTML является строкой, поэтому вам необходимо преобразовать строку в узел (например, путем создания из него элемента div), а затем соответствующим образом проанализировать узлы.

Обратите внимание, что вам действительно нужно запросить textContent, а не innerHTML, так как вы не хотите, чтобы в выводе реакции присутствовал html

const htmlContent = `<span class="remove-me">please</span>
<span class="remove-me">me too</span>
<span class="remove-me">and me</span>`;

const getNodesToRemoveFromElement = (stringContent) => {
  const el = document.createElement('div');
  el.innerHTML = stringContent;
  return el.getElementsByClassName('remove-me');
};

for (let node of getNodesToRemoveFromElement( htmlContent ) ) {
  console.log( node.textContent );
}