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

Question

我有问题。我目前正在寻找一种从字符串中删除任何 HTML 元素的方法。但是有两个条件：

1. 应保留元素的内容

2. 不应删除具有已定义类的特殊元素

我已经尝试了很多事情并查看了很多关于 SO 的问题/答案，但不幸的是我无法真正找出任何答案。不幸的是，这远远超出了我的能力。但我想知道这样的事情是如何工作的。

因此，当我有例如这样的字符串时：

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 keepconst 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 elementkeep.forEach((v, i) => {&nbsp; const keepStr = v.outerHTML;&nbsp; str = str.replace(keepStr, `_k${i}_`);});// Replace created element's innerHTML by patternised string.el.innerHTML = str;// Get the text onlylet stringify = el.innerText;// Replace patterns from the text string by keeping elementkeep.forEach((v,i) => {&nbsp; const keepStr = v.outerHTML;&nbsp; stringify = stringify.replace(`_k${i}_`, keepStr);});console.log(stringify);如果有任何误导，请给我评论。更新：正则表达式方法使用正则表达式可以完成相同的任务。方法是——通过正则表达式找到所有可保留的元素并存储它们。用相同的模式替换输入字符串中的所有可保留元素从 sting 中删除所有 HTML 标记。用可保留的元素替换相同的模式。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 elementsconst keepRegex = /<([a-z1-6]+)\s+(class=[\'\"](keep-this\s*.*?)[\'\"])[^>]*>.*?<\/\1>/ig;// RegExp for opening tagconst openRegex = /<([a-z1-6]+)\b[^>]*>/ig;// RegExp for closing tagconst closeRegex = /<\/[a-z1-6]+>/ig;// Find all the matches for the keeping elementsconst matches = [...htmlString.matchAll(keepRegex)];// Replace the input string with any pattern so that it could be replaced latermatches.forEach((match, i) => {&nbsp; htmlString = htmlString.replace(match[0], `_k${i}_`);});// Remove opening tags from the input stringhtmlString = htmlString.replace(openRegex, '');// Remove closing tags from the input stringhtmlString = htmlString.replace(closeRegex, '');// Replace the previously created pattern by keeping elementmatches.forEach((match, index) => {&nbsp; htmlString = htmlString.replace(`_k${index}_`, match[0]);})console.log(htmlString);

Answer 2

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