Remove HTML element span with class notranslate from string

Question

Need to remove specific HTML tag span with class "notranslate", The following solution is removing all HTML tag from my text.

My expected result is: 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), ''));

You can try create html element and remove element with these class name. For optimalization you can check if string contains this class name, but I don't know if it satisfies you. — blonial, Jul 09 '19 at 09:04
Possible duplicate of [How can I strip certain html tags out of a string?](https://stackoverflow.com/questions/11890664/how-can-i-strip-certain-html-tags-out-of-a-string) — MrUpsidown, Jul 09 '19 at 09:11
One of [SO's most seminal posts](https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags) is regarding the wisdom of parsing HTML with regular expressions. Avoid. Use a proper HTML parser to do this. — spender, Jul 09 '19 at 09:13

score 1 · Answer 1 · answered Jul 09 '19 at 09:05

1

Parsing DOM is complex enough to not write it by hand.

If you can run it in a browser, here is the solution:

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);

answered Jul 09 '19 at 09:05

Łukasz Nojek

1,511
11
17

it is the only script, no HTML dom is here. – Shohel Jul 09 '19 at 09:19
Where do you run this script? – Łukasz Nojek Jul 09 '19 at 09:26

MrUpsidown · Accepted Answer · 2019-07-09T10:00:48.543

If you really want to do it with a RegEx, you can use the below to strip any HTML span element which has the notranslate class. It takes into account the fact that you can have other properties on the element and multiple class names. As long as there is a <span> with class notranslate, it will strip the HTML tag and keep the content.

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

Working snippet:

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"));

If you can have multiple occurrences of that tag in the same string, you can add the g (global) flag.

/<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"));

score 0 · Answer 3 · answered Jul 09 '19 at 09:40

To remove a specific HTML tag but to keep the innerHtml, try 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

score -1 · Answer 4 · answered Jul 09 '19 at 09:02

-1

the method replace all tag because you use in RegExp the option 'gi' where 'gi' perform a global case-insensitive replacement. If you what replace a specific class you must define in regExp

answered Jul 09 '19 at 09:02

simona

15
4

Remove HTML element span with class notranslate from string

4 Answers4