wrapRangeText

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 wrap(tag) {

  var wrapper = document.createElement(tag);
  wrapper.classList.add('fancy-text');

  var range = document.createRange();
  range.selectNodeContents(document.body);

  var wrapped = wrapRangeText(wrapper, range);
  // nodes should be wrapped with `span.fancy-text` elements
  
  //wrapped.unwrap()
  // nodes should be unwrapped
}

// return all text nodes that are contained within `el`
function getTextNodes(el) {
  el = el || document.body

  var doc = el.ownerDocument || document
    , walker = doc.createTreeWalker(el, NodeFilter.SHOW_TEXT, null, false)
    , textNodes = []
    , node

  while (node = walker.nextNode()) {
    textNodes.push(node)
  }
  return textNodes
}

// return true if `rangeA` intersects `rangeB`
function rangesIntersect(rangeA, rangeB) {
  return rangeA.compareBoundaryPoints(Range.END_TO_START, rangeB) === -1 &&
    rangeA.compareBoundaryPoints(Range.START_TO_END, rangeB) === 1
}

// create and return a range that selects `node`
function createRangeFromNode(node) {
  var range = node.ownerDocument.createRange()
  try {
    range.selectNode(node)
  } catch (e) {
    range.selectNodeContents(node)
  }
  return range
}

// return true if `node` is fully or partially selected by `range`
function rangeIntersectsNode(range, node) {
  if (range.intersectsNode) {
    return range.intersectsNode(node)
  } else {
    return rangesIntersect(range, createRangeFromNode(node))
  }
}

// return all non-empty text nodes fully or partially selected by `range`
function getRangeTextNodes(range) {
  var container = range.commonAncestorContainer
    , nodes = getTextNodes(container.parentNode || container)

  return nodes.filter(function (node) {
    return rangeIntersectsNode(range, node) && isNonEmptyTextNode(node)
  })
}

// returns true if `node` has text content
function isNonEmptyTextNode(node) {
  return node.textContent.length > 0
}

// remove `el` from the DOM
function remove(el) {
  if (el.parentNode) {
   ...