remplacer le texte sélectionné dans une division modifiable par le contenu

Question

J'ai cherché partout une réponse, mais sans succès.

Existe-t-il une solution inter-navigateurs pour remplacer le texte sélectionné dans les documents suivants contentable div ?
Je veux simplement que les utilisateurs puissent mettre en surbrillance un texte et remplacer le texte en surbrillance par xxxxx .

Answer 1

Ce qui suit fera l'affaire dans tous les principaux navigateurs :

function replaceSelectedText(replacementText) {
    var sel, range;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            range.insertNode(document.createTextNode(replacementText));
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        range.text = replacementText;
    }
}

Answer 2

Comme j'ai posté un exemple fonctionnel sur comment ajouter un emoji entre les lettres dans la division contentEditable ? vous pouvez l'utiliser pour remplacer le texte nécessaire dans une division éditable de contenu.

  function pasteHtmlAtCaret(html) {
        let sel, range;
        if (window.getSelection) {
          // IE9 and non-IE
          sel = window.getSelection();
          if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();

            // Range.createContextualFragment() would be useful here but is
            // non-standard and not supported in all browsers (IE9, for one)
            const el = document.createElement("div");
            el.innerHTML = html;
            let frag = document.createDocumentFragment(),
              node,
              lastNode;
            while ((node = el.firstChild)) {
              lastNode = frag.appendChild(node);
            }
            range.insertNode(frag);

            // Preserve the selection
            if (lastNode) {
              range = range.cloneRange();
              range.setStartAfter(lastNode);
              range.collapse(true);
              sel.removeAllRanges();
              sel.addRange(range);
            }
          }
        } else if (document.selection && document.selection.type != "Control") {
          // IE < 9
          document.selection.createRange().pasteHTML(html);
        }
      }

      function addToDiv(event) {
        const emoji = event.target.value;
        const chatBox = document.getElementById("chatbox");
        chatBox.focus();
        pasteHtmlAtCaret(`<b>${emoji}</b>`);
      }
      function generateEmojiIcon(emoji) {
        const input = document.createElement("input");
        input.type = "button";
        input.value = emoji;
        input.innerText = emoji;
        input.addEventListener("click", addToDiv);
        return input;
      }
      const emojis = [
        {
          emoji: "

Answer 3

J'avais besoin de remplacer les nœuds de texte et de conserver les entités html lors du recollage. C'est ainsi que j'ai résolu le problème, mais je ne suis pas sûr de l'efficacité de la méthode. données sur nœuds de texte il est peut-être préférable d'utiliser textContent ou autre chose

let selection = window.getSelection()
  , range = selection.getRangeAt(0)
  , fragment = range.extractContents();

fragment.childNodes.forEach( e => e.data && (e.data = doSomething(e.data)) );
range.insertNode(fragment);