Regexp to remove recursively html in string by class and tag name

Question

Can somebody help me on this:

console.log('<span class="tooltip">aaaa</span><b>ok</b> <span class="tooltip">bbbb</span>'.replace('/<span .*?class="(.*?tooltip.*?)">(.*?)<\/span>/\g', ''))

I would like to remove span tags with class name .tooltip and so this to print in console "ok"

Also i would like not to trim the string so if any hidden char is present like \n should not be removed.

Does it need to be a regular expression? It's probably the hardest way to parse HTML. — Álvaro González, Mar 07 '17 at 08:46

Maciej Kozieja · Accepted Answer · 2017-03-19T12:51:06.470

2

You can do this:

const data = '<span class="tooltip">aaaa</span><b>ok</b> <span class="tooltip">bbbb</span>'
const removeTags = data => data.replace(/\s*<span.*?class="tooltip".*?>(.*?)\s*<\/span>\s*/g, '')

console.log(removeTags(data))

This will also match multiline:

const data = `<span class="tooltip">aaaa

</span><b>ok</b> <span class="tooltip">bbbb</span>`
const removeTags = data => data.replace(/(?:\s|\n)*<span(?:.|\n)*?class="tooltip"(?:.|\n)*?>(?:[^])*?(?:\s|\n)*<\/span>(?:\s|\n)*/g, '')
console.log(removeTags(data))

edited Mar 19 '17 at 12:51

answered Mar 07 '17 at 08:45

Maciej Kozieja

1,812
1
13
32

I need to remove by tag name and class , the one you show seems to remove any html tag or i am mistaking? – itsme Mar 07 '17 at 08:49
Yes so what tags you want to remove? – Maciej Kozieja Mar 07 '17 at 08:51
span with class .tooltip :) – itsme Mar 07 '17 at 08:51
only this class or other are alowed so `'tooltip black'` – Maciej Kozieja Mar 07 '17 at 08:52
sorry my bad it should print nothing in console, i go correct my question @Maciej – itsme Mar 07 '17 at 08:55
@sbaaaang now it's ok ? – Maciej Kozieja Mar 07 '17 at 08:57
awesome! does this takes into consideration the hidden chars like \n ? I would like to not trim the string in case some of them is present should remain in it – itsme Mar 07 '17 at 08:58
ok i updated my question thanks a lot then i accept your answer! – itsme Mar 07 '17 at 08:59

score 0 · Answer 2 · edited May 23 '17 at 11:46

You can use .getElementsByClassName() to find them and .remove() to remove them:

var input = '<span class="tooltip">aaaa</span><b>ok</b> <span class="tooltip">bbbb</span>';
var dom = document.createElement("div");
var toRemove;

dom.innerHTML = input;
toRemove = dom.getElementsByClassName("tooltip");
while (toRemove.length > 0) {
  toRemove[0].remove();
}
console.log(dom.innerHTML);

For more complex selections you can use, for instance, .querySelectorAll().

This approach admittedly does not use regular expressions but it has the advantage of being easier to maintain and more robust (HTML is not a regular language thus cannot be reliably parsed with regular expressions).

Regexp to remove recursively html in string by class and tag name

2 Answers2