Convierta HTML a texto sin formato en contentEditable

Tengo un contenido contentEditable y contentEditable del formato del contenido pegado on('paste') . Luego enfoco un área de texto, pego el contenido allí y copio el valor. Más o menos la respuesta de aquí . El problema es que no puedo hacer esto:

 $("#paste-output").text($("#area").val()); 

porque eso reemplazaría todo mi contenido con el texto pegado. Así que tengo que pegar el contenido en la posición de intercalación. Arreglé un guión que hace eso:

 pasteHtmlAtCaret($("#area").val()); // pastes CTRL+V content at caret position function pasteHtmlAtCaret(html) { var sel, range; if (window.getSelection) { sel = window.getSelection(); if (sel.getRangeAt && sel.rangeCount) { range = sel.getRangeAt(0); range.deleteContents(); var el = document.createElement("div"); el.innerHTML = html; var frag = document.createDocumentFragment(), node, lastNode; while ((node = el.firstChild)) { lastNode = frag.appendChild(node); } range.insertNode(frag); if (lastNode) { range = range.cloneRange(); range.setStartAfter(lastNode); range.collapse(true); sel.removeAllRanges(); sel.addRange(range); } } } else if (document.selection && document.selection.type != "Control") { document.selection.createRange().pasteHTML(html); } } 

El único problema es que pega contenido HTML, en la posición de intercalación utilizando la variable html . ¿Cómo puedo transformar eso en texto simple? Traté de agregar jQuery .text(html) a la variable sin suerte. Algo como esto podría ayudar:

 el.textContent||el.innerText; 

¿Alguna idea o una mejor solución? ¡Gracias!


EDITAR: Gracias a las respuestas a continuación modifiqué mi código y resolví el problema. Básicamente copié el valor de textarea en un div y agarré solo su .text() :

 // on paste, strip clipboard from HTML tags if any $('#post_title, #post_content').on("paste", function() { var text = $('
').html($("#area").val()).text(); pasteHtmlAtCaret(text); }, 20); });

  1. Crea un div externo,
  2. Pon tu html en ese div,
  3. Copia el texto de ese div
  4. Insertarlo en la posición del cursor.

Reemplace la solución de etiqueta:

http://jsfiddle.net/tomwan/cbp1u2cx/1/

 var $plainText = $("#plainText"); var $linkOnly = $("#linkOnly"); var $html = $("#html"); $plainText.on('paste', function (e) { window.setTimeout(function () { $plainText.html(removeAllTags(replaceStyleAttr($plainText.html()))); }, 0); }); $linkOnly.on('paste', function (e) { window.setTimeout(function () { $linkOnly.html(removeTagsExcludeA(replaceStyleAttr($linkOnly.html()))); }, 0); }); function replaceStyleAttr (str) { return str.replace(/(<[\w\W]*?)(style)([\w\W]*?>)/g, function (a, b, c, d) { return b + 'style_replace' + d; }); } function removeTagsExcludeA (str) { return str.replace(/<\/?((?!a)(\w+))\s*[\w\W]*?>/g, ''); } function removeAllTags (str) { return str.replace(/<\/?(\w+)\s*[\w\W]*?>/g, ''); } 

A petición de Jonathan Hobbs, estoy publicando esto como la respuesta. Gracias a las respuestas anteriores modifiqué mi código y resolví el problema. Básicamente copié el valor de textarea en un div y agarré solo su .text ():

 // on paste, strip clipboard from HTML tags if any $('#post_title, #post_content').on("paste", function() { setTimeout(function(){ var text = $('
').html($("#area").val()).text(); pasteHtmlAtCaret(text); }, 20); });

La solución que usé es establecer el texto interno del elemento en desenfoque:

$element.on('blur', () => this.innerText = this.innerText);

Esto mantiene el espacio en blanco, pero elimina el formato. También puede funcionar aceptable en su escenario.