Difficulty using javascript replace function with regex for <span> and </span>...all inclusive

Question

How can I use .replace() with regex for </?span>, as in this question? (this regex would ideally match <span> or </span>, including all things within the span)

I have tried a variety of examples, such as:

.replace(/</?span>/,"")

.replace(/</?span>/g,"")

.replace(/[</?span>]/,"")

.replace(/[</?span>]/g,"")

@Katana314 I agree, assuming that the person knows how to use .match() with regex in the first place — maudulus
– maudulus, Commented Dec 22, 2014 at 18:50
Why use regex in the first place? Is the HTML destined for the page? It's easier and safer to remove the nodes than to mess with HTML parsing. — six fingered man
– six fingered man, Commented Dec 22, 2014 at 18:53
Just a caution in case it applies here - it is not recommended to parse html with regex. stackoverflow.com/questions/1732348/… — Wet Noodles
– Wet Noodles, Commented Dec 22, 2014 at 18:53

anubhava · Accepted Answer · 2014-12-22 19:03:45Z

4

In Javascript you need to escape / because JS uses / as regex delimiters and add [^>]* to match anything in span:

.replace(/<\/?span[^>]*>/ig, "")

edited Dec 22, 2014 at 19:03

answered Dec 22, 2014 at 18:50

anubhava

790k67 gold badges603 silver badges671 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sam Battat Over a year ago

need to add g switch too

epascarello · Accepted Answer · 2014-12-22 19:11:55Z

2

Problem with your code is the regular expression ends at the first /

.replace(/</?span>/,"")
           ^--Thinks this is the closing /

It would need to be escaped.

.replace(/<\/?span>/,"")
           ^ Use \ to escape it

But why use a regular expression to remove elements when it nested elements are going to cause you issues. Use the power of the DOM and do not rely on regular expressions.

function removeSpans(htmlStr) {
    var wrapper = document.createElement("div");
    wrapper.innerHTML = htmlStr;
    var spans = wrapper.getElementsByTagName("span");
    while(spans.length) {
      spans[0].parentNode.removeChild(spans[0]);
   }
   return wrapper.innerHTML;
}


var myHTML = "<span>This is a span</span> Some text <span>This is another span</span>";
var cleanedHTML = removeSpans(myHTML);
document.getElementById("out").innerHTML = cleanedHTML;

<div id="out"></div>

with jQuery:

function removeSpans(htmlStr) {
   var wrapper = $("<div/>").html(htmlStr);
   wrapper.find("span").remove();
   return wrapper.html();
}

edited Dec 22, 2014 at 19:11

answered Dec 22, 2014 at 19:06

epascarello

208k20 gold badges206 silver badges246 bronze badges

1 Comment

user557597 Over a year ago

Thanks for posting the proper way to clean tags.

Sam Battat · Accepted Answer · 2014-12-22 18:57:56Z

0

I see that you included the jQuery tag in your question so I will assume that you can use jQuery. You could use jQuery to solve this issue.

$('span').each(function(){
   $(this).replaceWith($(this).text());
});

This will look for each span element, this element could be any of these:

<span>test</span>
<span class="has-a-class" id="also-an-id">a span with any number of attributes</span>

And replaces it with the text in that span, basically stripping the HTML tag and its attributes:

test
a span with any number of attributes

answered Dec 22, 2014 at 18:57

Sam Battat

5,7651 gold badge23 silver badges29 bronze badges

Comments

hjl · Accepted Answer · 2014-12-22 19:18:38Z

0

.replace(/<\/?span.*?>/gi, "")

add ? after * to make it non-greedy match.

edited Dec 22, 2014 at 19:18

answered Dec 22, 2014 at 19:01

hjl

2,8023 gold badges20 silver badges26 bronze badges

11 Comments

user1106925 Over a year ago

That's not going to make a difference.

user557597 Over a year ago

@squint - Yeah, but shouldn't you tell him why? And, the reason is relative.

user1106925 Over a year ago

@sln: Shouldn't he tell why it would make a difference?

hjl Over a year ago

Here yes, because it matches for [^>]*. Personally I keeps non-greedy as a practice, : ]

user557597 Over a year ago

@elaijuh - Its a tricky tradeoff, if its open-ended, the engine scans for the last > then works backwards, if it's not open-ended based on subsequent sub-expressions, it could still act in a greedy fashion.

|

Collectives™ on Stack Overflow

Difficulty using javascript replace function with regex for <span> and </span>...all inclusive

4 Answers 4

1 Comment

1 Comment

Comments

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related