Javascript replacing HTML tag using regex matching group

Question

I have the following string:

var x = '<p>Hello there <span contenteditable="false" class="fr-deletable">aaa</span>,<br></p><p>Hi <span contenteditable="false" class="fr-deletable">bbbb</span>,<br></p>';

I basically want to strip out all of the <span></span> tags but keep the inner content in tact. So the above should turn into:

'<p>Hello there aaa,<br></p><p>Hi bbbb,<br></p>';

I've tried a few things:

x.replace(/<span.*>(.*)<\/span>/g, '$1');
x.replace(/<span.*>/g, '');

But none of these gets me what I need. Help please?

Possible duplicate of [Replace HTML between two tags](https://stackoverflow.com/questions/40659473/replace-html-between-two-tags) — Sebastian Simon, Mar 31 '18 at 04:59
Possible duplicate of [Remove element with jQuery but leave text](https://stackoverflow.com/questions/2308366/remove-element-with-jquery-but-leave-text) — freedomn-m, Mar 31 '18 at 05:02
@7ball It does. `x.replace(/(.*?)<\/span>/g, '$1')` gives you precisely the desired result. — Sebastian Simon, Mar 31 '18 at 05:03
@Xufox sorry I thought you only meant inside the tag. It's good. Please write an answer. — 7ball, Mar 31 '18 at 05:05
Haha https://stackoverflow.com/questions/40659473/replace-html-between-two-tags#comment68550224_40659473. — , Mar 31 '18 at 05:11

CertainPerformance · Answer 1 · 2018-03-31T05:08:04.550

1

const input = '<p>Hello there <span contenteditable="false" class="fr-deletable">aaa</span>,<br></p><p>Hi <span contenteditable="false" class="fr-deletable">bbbb</span>,<br></p>';
const output = input.replace(/<span [^>]+>([^<]+)<\/span>/g, '$1');
console.log(output);

edited Mar 31 '18 at 05:08

answered Mar 31 '18 at 05:05

CertainPerformance

356,069
52
309
320

Pranav C Balan · Answer 2 · 2018-03-31T06:15:22.520

It's better to do after parsing the HTML, which can be done using jQuery.

var x = '<p>Hello there <span contenteditable="false" class="fr-deletable">aaa</span>,<br></p><p>Hi <span contenteditable="false" class="fr-deletable">bbbb</span>,<br></p>';

console.log(
  $('<div>', {
    html: x
  }).find('span').replaceWith(function() {
    return this.innerHTML;
  }).end().html()
)

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

FYI : Using regular expressions to parse HTML: why not?

score 0 · Answer 3 · answered Mar 31 '18 at 21:28

0

Try this:

var x = '<p>Hello there <span contenteditable="false" class="fr-deletable">aaa</span>,<br></p><p>Hi <span contenteditable="false" class="fr-deletable">bbbb</span>,<br></p>';
var y = x.replace(/(<sp|<\/sp)[^>]+>/g, "");
console.log(y);

answered Mar 31 '18 at 21:28

Mohammed Elhag

4,272
1
10
18

Javascript replacing HTML tag using regex matching group

3 Answers3