wrapRange

by Seth Van Booven

HTML

<div class="pen" contenteditable="true" spellcheck="false">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rhoncus quam a lectus congue imperdiet. Mauris faucibus imperdiet eros sed dignissim. Etiam rutrum nisi sit amet massa feugiat blandit. Nulla sed cursus dolor. Fusce at est nibh, et aliquam massa. Cras sit amet sapien sed mi hendrerit elementum vel vel est. Cras at aliquam massa. Pellentesque iaculis, odio dignissim dictum scelerisque, dolor odio gravida est, ut posuere quam lacus eget nibh. Proin aliquet faucibus ligula, a pulvinar lorem feugiat sit amet. Quisque erat felis, pharetra at mattis id, tincidunt nec urna. Vivamus aliquam orci quis ipsum commodo adipiscing. Donec vel nibh tellus, nec pulvinar turpis.</div>
<input type="button" onclick="wrap('div');" value="Wrap Range">

CSS

body { font:1rem/1.5 sans-serif;  margin:2rem; }
div {
    border:thin solid #ddd;
    padding:1rem;
    margin:1rem 0;
    color:black;
    font-size:1rem;
}

JavaScript

function isOrContains(node, container) {
  while (node) {
    if (node === container) {
      return true;
    }
    node = node.parentNode;
  }
  return false;
}

function wrap(tag) {
    var sel, range, el = document.querySelector('.pen');

    if (window.getSelection) {
        sel = window.getSelection();     
        if (sel.rangeCount) {
        
            for (var i = 0, l = sel.rangeCount; i < l; ++i) {
              if (!isOrContains(sel.getRangeAt(i).commonAncestorContainer, el)) {
                return false;
              }
            }
            
            range = sel.getRangeAt(0);          
            var selectedText = range.toString();
            range.deleteContents();
            var str = '[' + tag + ']' + selectedText + '[/' + tag + ']';
            var newNode = document.createTextNode(str);
            range.insertNode(newNode); 
            
            // move the cursor
            range.setStartAfter(newNode);
            range.setEndAfter(newNode); 
            sel.removeAllRanges();
            sel.addRange(range);
        }
    } 
}