Javascript 使用正则表达式匹配组替换 HTML 标记

Question

我有以下字符串：

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

我基本上想去掉所有<span></span> 标签，但保持内部内容完整。所以上面应该变成：

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

我尝试了一些方法：

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

但这些都不能满足我的需要。请帮忙？

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

Answer 2

最好是在解析完HTML之后再做，可以用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>

---

仅供参考： Using regular expressions to parse HTML: why not?

Answer 3

试试这个：

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