从字符串中删除带有类 notranslate 的 HTML 元素跨度答案

【问题标题】：Remove HTML element span with class notranslate from string从字符串中删除带有类 notranslate 的 HTML 元素跨度
【发布时间】：2019-07-09 08:53:00
【问题描述】：

需要使用“notranslate”类删除特定的 HTML 标记范围，以下解决方案是从我的文本中删除所有 HTML 标记。

我的预期结果是：Deleted String: Adding string: Idea No.<p>d</p> value Details

var str = 'Idea No.<p>d</p> {{value}} Details';
var addStr = 'Adding string: ' + str.replace('{{', '<span class="notranslate">').replace('}}', '</span>');
console.log('Deleted String: ' + addStr.replace(new RegExp(/<\/?[\w\s="/.':;#-\/\?]+>/gi), ''));

【问题讨论】：

您可以尝试使用这些类名创建 html 元素并删除元素。为了优化你可以检查字符串是否包含这个类名，但我不知道它是否满足你。
How can I strip certain html tags out of a string?的可能重复
SO's most seminal posts 之一是关于用正则表达式解析 HTML 的智慧。避免。使用适当的 HTML 解析器来执行此操作。

标签： javascript

【解决方案1】：

如果你真的想用 RegEx 来做，你可以使用下面的方法去除 any HTML span 元素有 @ 987654321@班级。它考虑到您可以在元素上拥有其他属性和多个类名这一事实。只要有<span> 类为notranslate，它就会剥离HTML 标记并保留内容。

/<span.*?class=(?:"|"(?:[^"]*)\s)notranslate(?:"|\s(?:[^"]*)").*?>(.*?)<\/span>/

工作sn-p：

let str1 = 'I want <span class="notranslate" data-xyz="whatever">this</span> to be removed.';

console.log('original:', str1);
console.log('modified:', str1.replace(/<span.*?class=(?:"|"(?:[^"]*)\s)notranslate(?:"|\s(?:[^"]*)").*?>(.*?)<\/span>/, "$1"));

let str2 = 'I want <span class="whatever notranslate another-class" data-xyz="whatever">this</span> to be removed.';

console.log('original:', str2);
console.log('modified:', str2.replace(/<span.*?class=(?:"|"(?:[^"]*)\s)notranslate(?:"|\s(?:[^"]*)").*?>(.*?)<\/span>/, "$1"));

如果您可以在同一字符串中多次出现该标记，则可以添加 g（全局）标志。

/<span.*?class=(?:"|"(?:[^"]*)\s)notranslate(?:"|\s(?:[^"]*)").*?>(.*?)<\/span>/g

let str1 = 'I want <span class="notranslate" data-xyz="whatever">this</span> but <span class="notranslate" data-xyz="whatever">also this</span> to be removed.';

console.log('original:', str1);
console.log('modified:', str1.replace(/<span.*?class=(?:"|"(?:[^"]*)\s)notranslate(?:"|\s(?:[^"]*)").*?>(.*?)<\/span>/g, "$1"));

【讨论】：

【解决方案2】：

解析 DOM 非常复杂，无法手动编写。

如果可以在浏览器中运行，解决方法如下：

var str = 'Idea No.<p>d</p> {{value}} Details';
var addStr = 'Adding string: ' + str.replace('{{', '<span class="notranslate">').replace('}}', '</span>');

const dom = document.createElement('div');
dom.innerHTML = addStr;
const notranslate = dom.getElementsByClassName('notranslate');
for (let elem of notranslate) {
  elem.remove();
}
console.log(dom.innerHTML);

【讨论】：

它是唯一的脚本，这里没有 HTML dom。
你在哪里运行这个脚本？

【解决方案3】：

要删除特定的 HTML 标记但保留 innerHtml，试试this：

var str = 'Idea No.<p>d</p> {{value}} Details';
var addStr = 'Adding string: ' + str.replace('{{', '<span class="notranslate">').replace('}}', '</span>');


const dom = document.createElement('div');
dom.innerHTML = addStr;

const span = dom.getElementsByClassName('notranslate');

while(span.length) {
    var parent = span[0].parentNode;
    while(span[0].firstChild) {
        parent.insertBefore(  span[ 0 ].firstChild, span[0]);
    }
     parent.removeChild(span[0]);
}
console.log(dom.innerHTML); //Adding string: Idea No.<p>d</p> value Details

【讨论】：

【解决方案4】：

该方法替换所有标记，因为您在 RegExp 中使用选项“gi”，其中“gi”执行全局不区分大小写的替换。如果您要替换特定类，则必须在 regExp 中定义

【讨论】：