javascript - 如何删除特定标签并保留其内容

Question

我在 contenteditable div 中有一些不需要的标签，需要删除它们。

那些是 和span

尝试使用 jqueryunwrap函数，但结果是undefined因为它删除了父标签而不是标签本身。

有什么帮助吗？在下面的示例中，预期的控制台是：

lorem ipsum lorem ipsum lorem ipsum

$('button').on('click', function(){
  $('span').unwrap();
  console.log($('#story').html());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='story' id='story'>
loem ipsum &nbsp;<span style="font-size: 1.3em;">lorem ipsum</span> lorem ipsum
</div>
<br>
<button>CLICK</button>

Answer 1

你必须使用喜欢

$("#story").find("span").contents().unwrap();

$('button').on('click', function(){
  $("#story").find("span").contents().unwrap();
  console.log($('#story').html().replace(/ /g, ''));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='story' id='story'>
loem ipsum &nbsp;<span style="font-size: 1.3em;">lorem ipsum</span> lorem ipsum
</div>
<br>
<button>CLICK</button>

Answer 2

您可以更改outerHTML为innerHTMLfor<span>并使用 replace 删除 

$('button').on('click', function(){
  $('span').each(function(){
    this.outerHTML = this.innerHTML;
  })
  let html = $('#story').html();
  $('#story').html(html.replace(/ /g,""))
  console.log($('#story').html());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='story' id='story'>
loem ipsum &nbsp;<span style="font-size: 1.3em;">lorem ipsum</span> lorem ipsum
</div>
<br>
<button>CLICK</button>

Answer 3

您需要解开文本节点，因此使用contents()方法获取所有子节点。并且替换 using String#replacemethod where html()method with a callback（回调中的第二个参数是旧的HTML内容）可用于更新内容。

$('button').on('click', function() {

  // get span tags child nodes and unwrap
  $('#story span').contents().unwrap();

  // remove   from html content
  $('#story').html((_, html) => html.replace(/ /g, ''))

  console.log($('#story').html());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='story' id='story'>
  loem ipsum &nbsp;<span style="font-size: 1.3em;">lorem ipsum</span> lorem ipsum
</div>
<br>
<button>CLICK</button>