Javascript String Replace span element by empty string

Question

I have HTML string in JS where I would like to remove the span element from it.

var HTML= '<div>test</div><p>test</p><span class="removedata">X</span><span>test</span><span class="removedata">X</span>';

After removing Span, it should be look like:

HTML= '<div>test</div><p>test</p><span>test</span>';

I have tried below JavaScript operation but does not work,

HTML = HTML.replace('/<span class="removedata">X</span>/g',"");

Any inputs?

Have a look here http://stackoverflow.com/questions/18464432/how-to-remove-span-tag-from-the-string — geo, Mar 23 '17 at 13:55
Above span remove string is fixed. So you can share solution based on it. No, I don't need Regular expression. — Ankit Shah, Mar 23 '17 at 13:55
Possible duplicate of [How to replace all occurrences of a string in JavaScript?](http://stackoverflow.com/questions/1144783/how-to-replace-all-occurrences-of-a-string-in-javascript) — Pugazh, Mar 23 '17 at 13:56

score 1 · Answer 1 · answered Mar 23 '17 at 13:56

You could try to do it with RegExp.

var str = '<div>test</div><p>test</p><span class="removedata">X</span><span>test</span><span class="removedata">X</span>',
    str2 = str.replace(/<span class="removedata">X<\/span>/g, '');
    console.log(str2);

score 1 · Accepted Answer · answered Mar 23 '17 at 13:57

The slash / is a special character in regular expressions and you need to escape it \/:

var html = '<div>test</div><p>test</p><span class="removedata">X</span><span>test</span><span class="removedata">X</span>';
var newHtml = html.replace(/<span class="removedata">X<\/span>/g, '');

console.log(newHtml); // "<div>test</div><p>test</p><span>test</span>"

Vergil Penkov · Answer 3 · 2017-03-23T14:01:22.223

0

If you insist on a regular expression, you could

HTML = HTML.replace(/<\/?span class="removedata".[^>]*>/g, '');

edited Mar 23 '17 at 14:01

answered Mar 23 '17 at 13:56

Vergil Penkov

380
2
11

1

This does not worked. I don't need to remove all span but span with class removedata. – Ankit Shah Mar 23 '17 at 13:58

score 0 · Answer 4 · answered Mar 23 '17 at 14:02

var HTML= '<div>test</div><p>test</p><span class="removedata">X</span><span>test</span><span class="removedata">X</span>';

var htmlObj = $(HTML);
htmlObj = htmlObj.not(".removedata");

var htmlString = $('<div>').append(htmlObj).html();
console.log(htmlString);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

score 0 · Answer 5 · answered Mar 23 '17 at 14:05

You could replace the text, but a different approach would be also possible:

At some point you are adding the content of HTML to the DOM-tree. When you've done that you could also achieve the "removement" by doing the following:

var elements = document.getElementsByClassName("removedata");
elements[0].parentNode.removeChild(elements[0]);

score 0 · Answer 6 · answered Mar 23 '17 at 18:01

The below could work.

var html = '<div>test</div><p>test</p><span class="removedata">X</span><span>test</span><span class="removedata">X</span>';
html = html.replace(/<span class="removedata">X<\/span>/g, '');
console.log(html);

You can use the below site if you are new to regex.

https://regex101.com/

Javascript String Replace span element by empty string

6 Answers6