Как я могу удалить все HTML элементы из строки, кроме специального класса?

Question

У меня проблема. В настоящее время я ищу способ удалить любые элементы HTML из строки. Но есть два условия:

1. Содержимое элементов должно быть сохранено
2. Специальные элементы с определенным классом не должны быть удалены

I ' Мы уже много чего перепробовали и просмотрели множество вопросов / ответов по SO, но, к сожалению, я не могу найти ни одного из ответов. К сожалению, это намного превосходит мои способности. Но я хотел бы знать, как что-то подобное работает.

Вопрос / Ответы, которые я пробовал: Как убрать HTML тегов из строки в JavaScript? , Полоска HTML из текста JavaScript

Поэтому, когда у меня есть, например, строка, подобная этой:

You have to pay <div class="keep-this">$200</div> per <span class="date">month</span> for your <span class="vehicle">car</span>

Она должна выглядеть следующим образом после удаления:

You have to pay <div class="keep-this">$200</div> per month for your car

Я на самом деле пробовал следующие вещи:

jQuery(document).ready(function ($) {
	let string = 'You have to pay <div class="keep-this">$200</div> per <span class="date">month</span> for your <span class="vehicle">car</span>';

	console.log(string);

	function removeHTMLfromString(string) {
		let tmp = document.createElement("DIV");

		tmp.innerHTML = string;
		return tmp.textContent || tmp.innerText || "";
	}

	console.log(removeHTMLfromString(string));

	console.log(string.replace(/<[^>]*>?/gm, ''));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

И я также опробовал инструмент регулярных выражений, чтобы увидеть, что получено, но, к сожалению, я также не добиваюсь большого прогресса здесь:

https://www.regexr.com/50qar

Я был бы рад, если бы кто-то мог помочь мне с этой задачей. Большое спасибо!

Обновление

Может быть, есть способ сделать это с помощью регулярного выражения? Если да, как я могу исключить свои элементы с помощью специального класса при использовании этого регулярного выражения: /<\/?[^>]+(>|$)/g?

Answer 1

Это может быть немного большой код. Но я думаю, что это может помочь вам.

let str = 'You have to pay <div class="keep-this">$200</div> per <span class="date">month</span> for your <span class="vehicle">car</span> <div class="keep-this">$500</div> also';

const el = document.createElement("div");
el.innerHTML = str;

// Get all the elements to keep
const keep = el.querySelectorAll(".keep-this");

// Replace the keeping element from the original string
// With special pattern and index so that we can replace
// the pattern with original keeping element
keep.forEach((v, i) => {
  const keepStr = v.outerHTML;
  str = str.replace(keepStr, `_k${i}_`);
});

// Replace created element's innerHTML by patternised string.
el.innerHTML = str;

// Get the text only
let stringify = el.innerText;

// Replace patterns from the text string by keeping element
keep.forEach((v,i) => {
  const keepStr = v.outerHTML;
  stringify = stringify.replace(`_k${i}_`, keepStr);
});

console.log(stringify);

Оставьте мой комментарий, если что-то вводит в заблуждение.

Обновление: подход с использованием регулярных выражений

Та же задача может быть сделано с помощью регулярного выражения. Подход -

1. Найти все сохраняемые элементы с помощью регулярных выражений и сохранить их.
2. Заменить все сохраняемые элементы из входной строки идентичным шаблоном
3. Удалить все HTML теги от укуса.
4. Замените идентичные шаблоны на сохраняемые элементы.

let htmlString = 'You have to pay <div class="keep-this">$200</div> per <span class="date">month</span> for your <span class="vehicle">car</span> Another <div class="keep-this">$400</div> here';

// RegExp for keep elements
const keepRegex = /<([a-z1-6]+)\s+(class=[\'\"](keep-this\s*.*?)[\'\"])[^>]*>.*?<\/\1>/ig;

// RegExp for opening tag
const openRegex = /<([a-z1-6]+)\b[^>]*>/ig;

// RegExp for closing tag
const closeRegex = /<\/[a-z1-6]+>/ig;

// Find all the matches for the keeping elements
const matches = [...htmlString.matchAll(keepRegex)];

// Replace the input string with any pattern so that it could be replaced later
matches.forEach((match, i) => {
  htmlString = htmlString.replace(match[0], `_k${i}_`);
});

// Remove opening tags from the input string
htmlString = htmlString.replace(openRegex, '');

// Remove closing tags from the input string
htmlString = htmlString.replace(closeRegex, '');

// Replace the previously created pattern by keeping element
matches.forEach((match, index) => {
  htmlString = htmlString.replace(`_k${index}_`, match[0]);
})

console.log(htmlString);

Answer 2

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