Contenteditable - 如何删除带有选定文本的HTML标记

Question

如何在具有选择文本的contenteditable中删除HTML标签

function testdemo() {
//what is next
....
}

之前：

<button onclick="testdemo();">RUN</button>

<div id="test" contenteditable="true">
  <b>Lorem ipsum</b> dolor sit amet, <span style="color:red;">ea ignota verear</span> quaerendum
</div>

之后：

<div id="test" contenteditable="true">
  Lorem ipsum dolor sit amet, ea ignota verear quaerendum
</div>

感谢您的先行一步。

- Sisi Sajah

---

请查看这个fiddle，它并不完美，但可以给你一些实现你想要的内容所需了解的想法。 - Teemu

Answer 1

尝试这个：

JS：

function testdemo() {
   var div = document.getElementById('test');
   div.innerHTML = div.textContent;
}

Jquery:

function testdemo() {
   $('#test').html($('#test').text());
}

- Mayank Pandeyz

---

"Text selection" 的意思是什么？ - Mayank Pandeyz

@SisiSajah 我也不太理解。 - smarber

@SisiSajah，我想您指的是所选文本部分。 - Mohammad

Answer 2

jQuery版本如下所示：

jQuery版本如下：

function testdemo() {
  $("#test").html($("#test").text());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="testdemo();">RUN</button>

<div id="test" contenteditable="true">
  
</div>

- Guruprasad J Rao

Answer 3

function testdemo() {
   var div = document.getElementById('test');
   div.innerHTML = div.textContent;
}

<button onclick="testdemo();">RUN</button>

<div id="test" contenteditable="true">
  <b>Lorem ipsum</b> dolor sit amet, <span style="color:red;">ea ignota verear</span> quaerendum
</div>

- smarber

Answer 4

看看这个能否帮到你。

function testdemo() {
$('#test').html($('#test').text()).text();​
}

- CaptainHere