splitSpan

by armin nekooee

HTML

<!DOCTYPE html>
<html>

  <body>
    <div contenteditable="true">
      <span style="font-size='14px'">this is a test</span>

      <p>other paragraphs .....</p>
      <p>other paragraphs .....</p>
      <p>other paragraphs .....</p>
    </div>
    <button onclick="splitSpan()">Click me</button>
  </body>

</html>

JavaScript

function splitSpan() {
  let sel = window.getSelection();
  let range = sel.getRangeAt(0);
  if (range.startContainer.parentNode.nodeName === 'SPAN') {
    let sel, range, cloneNode1, cloneNode2, cloneText, allContents, contentsBeforeCursor, contentsAfterCursor, newNode
    sel = window.getSelection();
    range = document.createRange();
    range.selectNode(sel.anchorNode);
    cloneNode1 = range.commonAncestorContainer.cloneNode();
    cloneNode2 = cloneNode1.cloneNode();
    cloneText = range.cloneContents();

    allContents = cloneText.textContent;
    contentsBeforeCursor = allContents.substring(0, sel.anchorOffset);
    contentsAfterCursor = allContents.substring(sel.anchorOffset, allContents.length);
    cloneNode1.textContent = contentsBeforeCursor
    cloneNode2.textContent = contentsAfterCursor
    newNode = document.createElement('SPAN');
    for (let i = 0; i < cloneNode1.attributes.length; i++) {
      let attr = cloneNode1.attributes.item(i);
      newNode.setAttribute(attr.nodeName, attr.nodeValue);
    }
    newNode.style.fontSize = '13px';

    range.selectNode(sel.anchorNode.parentNode);
    range.deleteContents();
    range.insertNode(cloneNode1)
    range.insertNode(newNode)
    range.insertNode(cloneNode2)
    newNode.focuse();

  }
}