Restringir pegar en contenteditable (HTML / JS)

Me gustaría evitar que el usuario pegue el marcado no permitido en un div contenteditable .

Me gustaría restringir el pegado a negrita, cursiva, huelga, subrayado y enlaces.

¿Cuál es la mejor manera (estoy usando jQuery )?

Esto no es un duplicado de JQuery Text Editor Paste Without Formatting . No quiero pegar sin formatear. Quiero seleccionar / restringir a algunas marcas.

Ya leí las siguientes preguntas, ninguna proporciona una respuesta clara:

  • Editor de texto JQuery pegar sin formatear
  • ¿Cómo filtrar el contenido pegado del usuario en div contenteditable?
  • Truco de Javascript para ‘pegar como texto sin formato’ en execCommand
  • Contenteditable permitiendo solo texto plano

Restrinja el contenido pegado escuchando el evento de paste del elemento editable. Dentro de este evento, puede filtrar los datos que el usuario intenta pegar utilizando una expresión regular.

 const el = document.querySelector('p'); el.addEventListener('paste', (e) => { // Get user's pasted data let data = e.clipboardData.getData('text/html') || e.clipboardData.getData('text/plain'); // Filter out everything except simple text and allowable HTML elements let regex = /<(?!(\/\s*)?(a|b|i|em|s|strong|u)[>,\s])([^>])*>/g; data = data.replace(regex, ''); // Insert the filtered content document.execCommand('insertHTML', false, data); // Prevent the standard paste behavior e.preventDefault(); }); 
 

Try pasting content into this paragraph. The pasted content can include a BOLD, ITALIC, STRIKE, or UNDERLINE. It can also include a LINK.