ssddanbrown · August 29, 2015 14:12
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title>Document</title>
 	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/string_score/0.1.10/string_score.min.js"></script>
 </head>
 <body>
 	<h1>TESTER</h1>
 	<form id="iframe-form">
 		<textarea id="iframe-content" type="text">
   &lt;div class=&quot;information&quot; id=&quot;content&quot; &gt;
  &lt;div class=&quot;wrap&quot; &gt;
  &lt;a class=&quot;button-flat&quot; &gt;Who we are&lt;/a&gt;
  
 &lt;h2&gt;Who we are&lt;/h2&gt;

 &lt;p class=&quot;pltr-bg&quot; &gt;We are electric bike enthusiasts with a passion for getting everyone set up and riding on electric bikes. Our specialist&amp;nbsp;team has built up a vast amount of ebike knowledge that we use daily to provide an exceptional experience for our customers.&amp;nbsp;We aim to give you a personal service and differ from others in that we are happy to spend the time with you to make sure you get the right bike that is practical for you. We are also here to offer you any after sales support that may be needed, from servicing to repairs we are on hand to make sure your eBike experience is the best experience!&amp;nbsp;All bikes are properly built in our workshops to the highest standards by our professional technicians.&lt;/p&gt;

 &lt;p&gt;&amp;nbsp;&lt;/p&gt;

 &lt;h2&gt;What &lt;br&gt; makes us different&lt;/h2&gt;

 &lt;ul&gt;
  &lt;li&gt;We pride ourselves in our award winning customer service&lt;/li&gt;
  &lt;li&gt;We offer the best guarantees in the country and they are NO QUIBBLE!&lt;/li&gt;
  &lt;li&gt;If you do have a problem you can come back and shout at us and we&amp;rsquo;ll fix it&lt;/li&gt;
  &lt;li&gt;We care about our customers after a sale and therefore are always here for you&lt;/li&gt;
  &lt;li&gt;We can deliver your bike for free if you live in the surrounding areas&lt;/li&gt;
  &lt;li&gt;We give free setups on all our eBikes and offer an additional FREE service on top&lt;/li&gt;
  &lt;li&gt;We have the quickest turnaround of service work in the south, usually next day&lt;/li&gt;
  &lt;li&gt;We will personally help you choose all the correct equipment&lt;/li&gt;
  &lt;li&gt;All of our bikes leave with a personal set up to make sure it&amp;rsquo;s catered just for YOU&lt;/li&gt;
  &lt;li&gt;Most of all we don&amp;#39;t just sell eBikes but we offer free advice too!&lt;/li&gt;
 &lt;/ul&gt;

 &lt;/div&gt;
 &lt;/div&gt;

 		</textarea>
 		<button>Set IFrame</button>
 	</form>
 	<textarea id="text-input"></textarea>
 	<div id="results"></div>
 	<iframe style="width:500px;position:fixed;right:0;top:0;height:700px;" id="iframe" frameborder="0"></iframe>
 </body>

 <script>

 var Iframe = function(element) {

 	this.element = element;
 	this.document = element.contentDocument;
 	this.jElem = $(element.contentDocument);

 	this.write = function(content) {
 		this.document.open();
 		this.document.write(content);
 		this.document.close();
 	};

 	this.testTerms = function(terms) {
 		iframeText = this.jElem.text().replace(/\s+/g, " ");
 		var testedTerms = [];
 		for (var i = 0; i < terms.length; i++) {
 			var result = {
 				term: terms[i],
 				matched: iframeText.indexOf(terms[i]) >= 0,
 			};

 			if (result.matched) {
 				result.elements = this.getTermElements(terms[i]);
 			} else {
 				result.bestMatch = this.getBestMatch(terms[i]);
 			}

 			testedTerms.push(result);
 		}

 		return testedTerms;
 	};

 	this.getBestMatch = function(term) {
 		var bestElem = false;
 		var bestElemScore = 0;
 		this.jElem.find('*').each(function() {
 			var text = $(this).clone().children().remove().end().text().replace(/\s+/g, " ");
 			var score = text.score(term, 0.1);
 			if (score > bestElemScore) {
 				bestElem = $(this);
 				bestElemScore = score;
 			}
 		});

 		return bestElem;
 	};

 	this.getTermElements = function(term) {
 		var elems = [];
 		this.jElem.find('*').each(function() {
 			var text = $(this).clone().children().remove().end().text().replace(/\s+/g, " ");
 			if (text.trim().length > 0 && text.indexOf(term) >= 0) {
 				elems.push($(this));
 			}
 		});
 		return elems.length > 0 ? elems : false;
 	};
 };

 $(document).ready(function() {

 	var iframe = new Iframe(document.getElementById('iframe'));

 	$('#iframe-form').submit(function(e){
 		e.preventDefault();
 		var content = $(this).find('#iframe-content').val();
 		iframe.write(content);
 	});

 	$('#text-input').bind('input', function() {
 		var text = $(this).val().split("\n");
 		var testedTerms = iframe.testTerms(text);
 		var results = $('#results');
 		for (var i = 0; i < testedTerms.length; i++) {
 			var result = $('<div class="term"></div>').html('<b>'+testedTerms[i].term+'</b>'+(testedTerms[i].matched?'<span style="color:green;"> MATCHED</span>':'<span style="color:red;"> NO MATCH</span>' ));
 			// Clojure prevents click event overwriting
 			(function() {
 			if (testedTerms[i].elements) {
 				result.append('<span> '+testedTerms[i].elements.length+' Occurances found</span>');
 				var elements = testedTerms[i].elements;
 				result.click(function() {
 					for (var i = elements.length - 1; i >= 0; i--) {
 						elements[i].css('border', '1px solid red');
 					}
 				});
 			} else if (testedTerms[i].bestMatch) {
 				result.append('<span>CLOSEST MATCH</span>');
 				var bestMatch = testedTerms[i].bestMatch;
 				result.click(function() {
 					bestMatch.css('border', '1px solid red');
 				});
 			}
 			})();

 			results.append(result);
 		}
 	});

 });
 </script>

 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/string_score/0.1.10/string_score.min.js"></script>
	</head>
	<body>
	<h1>TESTER</h1>
	<form id="iframe-form">
	<textarea id="iframe-content" type="text">
	<div class="information" id="content" >
	<div class="wrap" >
	<a class="button-flat" >Who we are</a>

	<h2>Who we are</h2>

	<p class="pltr-bg" >We are electric bike enthusiasts with a passion for getting everyone set up and riding on electric bikes. Our specialist&nbsp;team has built up a vast amount of ebike knowledge that we use daily to provide an exceptional experience for our customers.&nbsp;We aim to give you a personal service and differ from others in that we are happy to spend the time with you to make sure you get the right bike that is practical for you. We are also here to offer you any after sales support that may be needed, from servicing to repairs we are on hand to make sure your eBike experience is the best experience!&nbsp;All bikes are properly built in our workshops to the highest standards by our professional technicians.</p>

	<p>&nbsp;</p>

	<h2>What <br> makes us different</h2>

	<ul>
	<li>We pride ourselves in our award winning customer service</li>
	<li>We offer the best guarantees in the country and they are NO QUIBBLE!</li>
	<li>If you do have a problem you can come back and shout at us and we&rsquo;ll fix it</li>
	<li>We care about our customers after a sale and therefore are always here for you</li>
	<li>We can deliver your bike for free if you live in the surrounding areas</li>
	<li>We give free setups on all our eBikes and offer an additional FREE service on top</li>
	<li>We have the quickest turnaround of service work in the south, usually next day</li>
	<li>We will personally help you choose all the correct equipment</li>
	<li>All of our bikes leave with a personal set up to make sure it&rsquo;s catered just for YOU</li>
	<li>Most of all we don&#39;t just sell eBikes but we offer free advice too!</li>
	</ul>

	</div>
	</div>

	</textarea>
	<button>Set IFrame</button>
	</form>
	<textarea id="text-input"></textarea>
	<div id="results"></div>
	<iframe style="width:500px;position:fixed;right:0;top:0;height:700px;" id="iframe" frameborder="0"></iframe>
	</body>

	<script>

	var Iframe = function(element) {

	this.element = element;
	this.document = element.contentDocument;
	this.jElem = $(element.contentDocument);

	this.write = function(content) {
	this.document.open();
	this.document.write(content);
	this.document.close();
	};

	this.testTerms = function(terms) {
	iframeText = this.jElem.text().replace(/\s+/g, " ");
	var testedTerms = [];
	for (var i = 0; i < terms.length; i++) {
	var result = {
	term: terms[i],
	matched: iframeText.indexOf(terms[i]) >= 0,
	};

	if (result.matched) {
	result.elements = this.getTermElements(terms[i]);
	} else {
	result.bestMatch = this.getBestMatch(terms[i]);
	}

	testedTerms.push(result);
	}

	return testedTerms;
	};

	this.getBestMatch = function(term) {
	var bestElem = false;
	var bestElemScore = 0;
	this.jElem.find('*').each(function() {
	var text = $(this).clone().children().remove().end().text().replace(/\s+/g, " ");
	var score = text.score(term, 0.1);
	if (score > bestElemScore) {
	bestElem = $(this);
	bestElemScore = score;
	}
	});

	return bestElem;
	};

	this.getTermElements = function(term) {
	var elems = [];
	this.jElem.find('*').each(function() {
	var text = $(this).clone().children().remove().end().text().replace(/\s+/g, " ");
	if (text.trim().length > 0 && text.indexOf(term) >= 0) {
	elems.push($(this));
	}
	});
	return elems.length > 0 ? elems : false;
	};
	};

	$(document).ready(function() {

	var iframe = new Iframe(document.getElementById('iframe'));

	$('#iframe-form').submit(function(e){
	e.preventDefault();
	var content = $(this).find('#iframe-content').val();
	iframe.write(content);
	});

	$('#text-input').bind('input', function() {
	var text = $(this).val().split("\n");
	var testedTerms = iframe.testTerms(text);
	var results = $('#results');
	for (var i = 0; i < testedTerms.length; i++) {
	var result = $('<div class="term"></div>').html('<b>'+testedTerms[i].term+'</b>'+(testedTerms[i].matched?'<span style="color:green;"> MATCHED</span>':'<span style="color:red;"> NO MATCH</span>' ));
	// Clojure prevents click event overwriting
	(function() {
	if (testedTerms[i].elements) {
	result.append('<span> '+testedTerms[i].elements.length+' Occurances found</span>');
	var elements = testedTerms[i].elements;
	result.click(function() {
	for (var i = elements.length - 1; i >= 0; i--) {
	elements[i].css('border', '1px solid red');
	}
	});
	} else if (testedTerms[i].bestMatch) {
	result.append('<span>CLOSEST MATCH</span>');
	var bestMatch = testedTerms[i].bestMatch;
	result.click(function() {
	bestMatch.css('border', '1px solid red');
	});
	}
	})();

	results.append(result);
	}
	});

	});
	</script>

	</html>