requirebin sketch

index.js

var seek = require('dom-seek');

var text = 'ipsum';

// Find the text.
var offset = document.body.textContent.indexOf(text);
var length = text.length

// Create a NodeIterator.
var iter = document.createNodeIterator(document.body, NodeFilter.SHOW_TEXT);

// Seek the iterator forward by some amount, splitting the text node that
// contains the destination if it does not fall exactly at a text node boundary.
function split(where) {
  var count = seek(iter, where);
  if (count != where) {
    // Split the text at the offset
    iter.referenceNode.splitText(where - count);

    // Seek to the exact offset.
    seek(iter, where - count);
  }
  return iter.referenceNode;
}

// Find split points
var start = split(offset);
var end = split(length);

// Walk backwards, collecting all the nodes
var nodes = [];
while (iter.referenceNode !== start && !iter.pointerBeforeReferenceNode) {
  nodes.push(iter.previousNode());
}

// Highlight all the nodes.
for (var i = 0 ; i < nodes.length ; i++) {
  var node = nodes[i];

  // Create a highlight
  var highlight = document.createElement('mark');
  highlight.classList.add('annotator-hl');

  // Wrap it around the text node
  node.parentNode.replaceChild(highlight, node);
  highlight.appendChild(node);
}

minified.js

require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){module.exports=parents;function parents(node,filter){var out=[];filter=filter||noop;do{out.push(node);node=node.parentNode}while(node&&node.tagName&&filter(node));return out.slice(1)}function noop(n){return true}},{}],2:[function(require,module,exports){"use strict";module.exports=function indexOf(arr,ele,start){start=start||0;var idx=-1;if(arr==null)return idx;var len=arr.length;var i=start<0?len+start:start;if(i>=arr.length){return-1}while(i<len){if(arr[i]===ele){return i}i++}return-1}},{}],"dom-seek":[function(require,module,exports){"use strict";exports.__esModule=true;exports["default"]=seek;function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}var _ancestors=require("ancestors");var _ancestors2=_interopRequireDefault(_ancestors);var _indexOf=require("index-of");var _indexOf2=_interopRequireDefault(_indexOf);var E_SHOW="Argument 1 of seek must use filter NodeFilter.SHOW_TEXT.";var E_WHERE="Argument 2 of seek must be a number or a Text Node.";var SHOW_TEXT=4;var TEXT_NODE=3;var DOCUMENT_POSITION_PRECEDING=2;var DOCUMENT_POSITION_FOLLOWING=4;function seek(iter,where){if(iter.whatToShow!==SHOW_TEXT){throw new Error(E_SHOW)}var count=0;var node=iter.referenceNode;var predicates=null;if(isNumber(where)){predicates={forward:function forward(){return count<where},backward:function backward(){return count>where}}}else if(isText(where)){var forward=before(node,where)?function(){return false}:function(){return node!==where};var backward=function backward(){return node!=where||!iter.pointerBeforeReferenceNode};predicates={forward:forward,backward:backward}}else{throw new Error(E_WHERE)}while(predicates.forward()&&(node=iter.nextNode())!==null){count+=node.nodeValue.length}while(predicates.backward()&&(node=iter.previousNode())!==null){count-=node.nodeValue.length}return count}function isNumber(n){return!isNaN(parseInt(n))&&isFinite(n)}function isText(node){return node.nodeType===TEXT_NODE}function before(ref,node){if(ref===node)return false;var common=null;var left=[ref].concat(_ancestors2["default"](ref)).reverse();var right=[node].concat(_ancestors2["default"](node)).reverse();while(left[0]===right[0]){common=left.shift();right.shift()}left=left[0];right=right[0];var l=_indexOf2["default"](common.childNodes,left);var r=_indexOf2["default"](common.childNodes,right);return l>r}module.exports=exports["default"]},{ancestors:1,"index-of":2}]},{},[]);var seek=require("dom-seek");var text="ipsum";var offset=document.body.textContent.indexOf(text);var length=text.length;var iter=document.createNodeIterator(document.body,NodeFilter.SHOW_TEXT);function split(where){var count=seek(iter,where);if(count!=where){iter.referenceNode.splitText(where-count);seek(iter,where-count)}return iter.referenceNode}var start=split(offset);var end=split(length);var nodes=[];while(iter.referenceNode!==start&&!iter.pointerBeforeReferenceNode){nodes.push(iter.previousNode())}for(var i=0;i<nodes.length;i++){var node=nodes[i];var highlight=document.createElement("mark");highlight.classList.add("annotator-hl");node.parentNode.replaceChild(highlight,node);highlight.appendChild(node)}

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "dom-seek": "2.1.0"
  }
}

page-body.html

<!-- contents of this file will be placed inside the <body> -->
<article>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu viverra elit. Aliquam dui ipsum, accumsan non urna eget, pellentesque porta ipsum. Vivamus vitae ante accumsan, condimentum ante pretium, bibendum mi. Aliquam vel orci augue. Morbi at ex lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In non odio at leo porta egestas nec in sem. Vestibulum blandit velit ac est mollis ultricies. Nullam molestie risus accumsan purus luctus malesuada. Quisque auctor non justo a aliquet.
</p>
<p>
Phasellus vitae sem et augue finibus finibus nec vel velit. Donec non metus cursus, placerat quam tincidunt, vulputate neque. Vestibulum euismod dui a pulvinar tincidunt. Nunc vel massa metus. Aliquam erat volutpat. Sed sed vehicula nulla, eget mattis lacus. Mauris varius lacus vitae leo tincidunt ornare. Pellentesque varius tortor sem, nec porttitor velit vestibulum eu. Quisque vehicula quam quis ipsum semper, sed rutrum nisi cursus.
</p>
<p>
Vivamus massa sapien, dapibus sed porttitor a, hendrerit sit amet sem. Duis orci arcu, rutrum vel aliquam in, eleifend ac sem. Pellentesque sed ex vehicula, facilisis nulla non, malesuada quam. Donec nisl enim, vestibulum sed libero at, dictum finibus lorem. Vestibulum ultrices est sed tortor tempor, at rhoncus tortor gravida. Donec fringilla eleifend urna. Quisque imperdiet congue mi id efficitur. Aliquam posuere dolor porttitor lectus porttitor, at laoreet risus interdum. Aliquam non urna non eros auctor aliquet quis consectetur nisi. Mauris hendrerit commodo dictum.
</p>
<p>
Phasellus consequat enim sit amet pretium efficitur. Integer pulvinar enim et nulla pharetra, ut tristique nibh placerat. Phasellus mattis purus non sem imperdiet, sit amet ultricies leo ullamcorper. Aenean vel felis vitae ante vestibulum ultrices sed eget ipsum. Quisque magna lorem, pretium id sapien ut, fermentum laoreet magna. Nunc tincidunt risus ut finibus consequat. Sed scelerisque metus in risus tristique, a suscipit orci feugiat. In hac habitasse platea dictumst. Maecenas tempor eget neque sit amet tempus. Nullam tincidunt lorem in porta mollis. Aliquam velit ex, ultricies at risus nec, condimentum lobortis mauris. Mauris gravida porta arcu, vitae efficitur mi iaculis volutpat.
</p>
<p>
Nam vehicula, dui et mollis rhoncus, quam risus rhoncus mauris, eu pulvinar nibh quam id eros. Etiam condimentum libero vitae arcu efficitur, ut ultrices arcu fringilla. Sed porta auctor nunc eu cursus. Nam iaculis in arcu id dignissim. Nunc eu viverra nunc. Aenean luctus elit nec urna gravida tincidunt. Etiam non diam nunc. Vestibulum ac pharetra nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum non ultricies nulla. Vestibulum ut sem vitae felis hendrerit sollicitudin. In et tellus leo. Nullam mollis tortor at lobortis rhoncus.
</p>
</article>

page-head.html

<!-- contents of this file will be placed inside the <head> -->

requirebin.md

made with requirebin