如何从字符串中删除除特殊类之外的所有 HTML 元素？

Question

我有问题。我目前正在寻找一种从字符串中删除任何 HTML 元素的方法。但有两个条件：应保留元素的内容不应删除已定义类的特殊元素我已经尝试了很多事情并查看了很多问题/答案，但不幸的是我无法真正找出任何答案。不幸的是，这远远超出了我的能力。但我想知道这样的事情是如何运作的。我尝试过的问题/答案： 如何从 JavaScript 中的字符串中删除 HTML 标签？, 从文本 JavaScript 中剥离 HTML因此，当我有一个像这样的字符串时：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

如果日期和车辆 div 和类来自另一个函数，您应该从那里删除它。