bondarewicz/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style id="jsbin-css">
.highlight
{
background-color:yellow;
}
</style>
</head>
<body>
  <div id="yaynay">...</div>

  <textarea name="textarea" id="regex"
   rows="10" cols="50" onkeyup="hightlight()">(?=.*?\bmedia temple\b).*$</textarea>

  <pre id="subject">Welcome to RegExr v2.1 by gskinner.com, proudly hosted by Media Temple!

Edit the Expression & Text to see matches. Roll over matches or the expression for details. Undo mistakes with cmd-z. Save Favorites & Share expressions with friends or the Community. Explore your results with Tools. A full Reference & Help is available in the Library, or watch the video Tutorial.

Sample text for testing:
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789 _+-.,!@#$%^&*();\/|<>"'
12345 -98.7 3.141 .6180 9,000 +42
555.123.4567	+1-(800)-555-2468
foo@demo.net	bar.ba@test.co.uk
www.demo.com	http://foo.co.uk/
http://regexr.com/foo.html?q=bar
https://mediatemple.net
</pre>

<script id="jsbin-javascript">
var str = document.getElementById('subject').textContent;

function hightlight() {


// var str = 'Delivery attempted in London, UK. \n Delivery attempted in Manchester, UK';
// var str = document.getElementById('subject').textContent;
var regexp = new RegExp(document.getElementById('regex').value, 'igm');
var inputText = document.getElementById("subject");
  var yaynay = document.getElementById("yaynay");
      var highlight = document.getElementById('highlight');

//   console.log('regex',regexp);
//   console.log('original', str);

  if(regexp.test(str)) {
    yaynay.innerHTML = "yay &#10003;";
  } else {
    yaynay.innerHTML = "nay &#x2717;";
  }
// console.log(str);

var results = str.match(regexp);
// var results = str.match(/^(?=.*?\bmedia  temple\b).*$/igm)

console.log('results', results);

  var innerHTML = document.getElementById('subject').innerHTML;

  if(results !== null) {
    var index = innerHTML.indexOf(results[0]);
    // console.log('index', index);

    if ( index >= 0 ) {
        innerHTML = innerHTML.substring(0,index) + "<span id='highlight' class='highlight'>" + innerHTML.substring(index,index+results[0].length) + "</span>" + innerHTML.substring(index + results[0].length);
        inputText.innerHTML = innerHTML;
    } else {
      console.log('nay');


      highlight.remove();
      highlight.parentNode.removeChild(elem);
      inputText.innerHTML = str;
    }
  } else {

      highlight.remove();
    inputText.innerHTML = str;
  }

}
</script>


<script id="jsbin-source-css" type="text/css">.highlight
{
background-color:yellow;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">var str = document.getElementById('subject').textContent;

function hightlight() {


// var str = 'Delivery attempted in London, UK. \n Delivery attempted in Manchester, UK';
// var str = document.getElementById('subject').textContent;
var regexp = new RegExp(document.getElementById('regex').value, 'igm');
var inputText = document.getElementById("subject");
  var yaynay = document.getElementById("yaynay");
      var highlight = document.getElementById('highlight');

//   console.log('regex',regexp);
//   console.log('original', str);

  if(regexp.test(str)) {
    yaynay.innerHTML = "yay &#10003;";
  } else {
    yaynay.innerHTML = "nay &#x2717;";
  }
// console.log(str);

var results = str.match(regexp);
// var results = str.match(/^(?=.*?\bmedia  temple\b).*$/igm)

console.log('results', results);

  var innerHTML = document.getElementById('subject').innerHTML;

  if(results !== null) {
    var index = innerHTML.indexOf(results[0]);
    // console.log('index', index);

    if ( index >= 0 ) {
        innerHTML = innerHTML.substring(0,index) + "<span id='highlight' class='highlight'>" + innerHTML.substring(index,index+results[0].length) + "</span>" + innerHTML.substring(index + results[0].length);
        inputText.innerHTML = innerHTML;
    } else {
      console.log('nay');


      highlight.remove();
      highlight.parentNode.removeChild(elem);
      inputText.innerHTML = str;
    }
  } else {

      highlight.remove();
    inputText.innerHTML = str;
  }

}</script></body>
</html>

## jsbin.kolitediwi.css
.highlight
{
background-color:yellow;
}

## jsbin.kolitediwi.js
var str = document.getElementById('subject').textContent;

function hightlight() {


// var str = 'Delivery attempted in London, UK. \n Delivery attempted in Manchester, UK';
// var str = document.getElementById('subject').textContent;
var regexp = new RegExp(document.getElementById('regex').value, 'igm');
var inputText = document.getElementById("subject");
  var yaynay = document.getElementById("yaynay");
      var highlight = document.getElementById('highlight');

//   console.log('regex',regexp);
//   console.log('original', str);

  if(regexp.test(str)) {
    yaynay.innerHTML = "yay &#10003;";
  } else {
    yaynay.innerHTML = "nay &#x2717;";
  }
// console.log(str);

var results = str.match(regexp);
// var results = str.match(/^(?=.*?\bmedia  temple\b).*$/igm)

console.log('results', results);

  var innerHTML = document.getElementById('subject').innerHTML;

  if(results !== null) {
    var index = innerHTML.indexOf(results[0]);
    // console.log('index', index);

    if ( index >= 0 ) {
        innerHTML = innerHTML.substring(0,index) + "<span id='highlight' class='highlight'>" + innerHTML.substring(index,index+results[0].length) + "</span>" + innerHTML.substring(index + results[0].length);
        inputText.innerHTML = innerHTML;
    } else {
      console.log('nay');


      highlight.remove();
      highlight.parentNode.removeChild(elem);
      inputText.innerHTML = str;
    }
  } else {

      highlight.remove();
    inputText.innerHTML = str;
  }

}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>JS Bin</title>
	<style id="jsbin-css">
	.highlight
	{
	background-color:yellow;
	}
	</style>
	</head>
	<body>
	<div id="yaynay">...</div>

	<textarea name="textarea" id="regex"
	rows="10" cols="50" onkeyup="hightlight()">(?=.?\bmedia temple\b).$</textarea>

	<pre id="subject">Welcome to RegExr v2.1 by gskinner.com, proudly hosted by Media Temple!

	Edit the Expression & Text to see matches. Roll over matches or the expression for details. Undo mistakes with cmd-z. Save Favorites & Share expressions with friends or the Community. Explore your results with Tools. A full Reference & Help is available in the Library, or watch the video Tutorial.

	Sample text for testing:
	abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ
	0123456789 _+-.,!@#$%^&*();\/\|<>"'
	12345 -98.7 3.141 .6180 9,000 +42
	555.123.4567 +1-(800)-555-2468
	foo@demo.net bar.ba@test.co.uk
	www.demo.com http://foo.co.uk/
	http://regexr.com/foo.html?q=bar
	https://mediatemple.net
	</pre>

	<script id="jsbin-javascript">
	var str = document.getElementById('subject').textContent;

	function hightlight() {


	// var str = 'Delivery attempted in London, UK. \n Delivery attempted in Manchester, UK';
	// var str = document.getElementById('subject').textContent;
	var regexp = new RegExp(document.getElementById('regex').value, 'igm');
	var inputText = document.getElementById("subject");
	var yaynay = document.getElementById("yaynay");
	var highlight = document.getElementById('highlight');

	// console.log('regex',regexp);
	// console.log('original', str);

	if(regexp.test(str)) {
	yaynay.innerHTML = "yay ✓";
	} else {
	yaynay.innerHTML = "nay ✗";
	}
	// console.log(str);

	var results = str.match(regexp);
	// var results = str.match(/^(?=.?\bmedia temple\b).$/igm)

	console.log('results', results);

	var innerHTML = document.getElementById('subject').innerHTML;

	if(results !== null) {
	var index = innerHTML.indexOf(results[0]);
	// console.log('index', index);

	if ( index >= 0 ) {
	innerHTML = innerHTML.substring(0,index) + "<span id='highlight' class='highlight'>" + innerHTML.substring(index,index+results[0].length) + "</span>" + innerHTML.substring(index + results[0].length);
	inputText.innerHTML = innerHTML;
	} else {
	console.log('nay');


	highlight.remove();
	highlight.parentNode.removeChild(elem);
	inputText.innerHTML = str;
	}
	} else {

	highlight.remove();
	inputText.innerHTML = str;
	}

	}
	</script>


	<script id="jsbin-source-css" type="text/css">.highlight
	{
	background-color:yellow;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">var str = document.getElementById('subject').textContent;

	function hightlight() {


	// var str = 'Delivery attempted in London, UK. \n Delivery attempted in Manchester, UK';
	// var str = document.getElementById('subject').textContent;
	var regexp = new RegExp(document.getElementById('regex').value, 'igm');
	var inputText = document.getElementById("subject");
	var yaynay = document.getElementById("yaynay");
	var highlight = document.getElementById('highlight');

	// console.log('regex',regexp);
	// console.log('original', str);

	if(regexp.test(str)) {
	yaynay.innerHTML = "yay ✓";
	} else {
	yaynay.innerHTML = "nay ✗";
	}
	// console.log(str);

	var results = str.match(regexp);
	// var results = str.match(/^(?=.?\bmedia temple\b).$/igm)

	console.log('results', results);

	var innerHTML = document.getElementById('subject').innerHTML;

	if(results !== null) {
	var index = innerHTML.indexOf(results[0]);
	// console.log('index', index);

	if ( index >= 0 ) {
	innerHTML = innerHTML.substring(0,index) + "<span id='highlight' class='highlight'>" + innerHTML.substring(index,index+results[0].length) + "</span>" + innerHTML.substring(index + results[0].length);
	inputText.innerHTML = innerHTML;
	} else {
	console.log('nay');


	highlight.remove();
	highlight.parentNode.removeChild(elem);
	inputText.innerHTML = str;
	}
	} else {

	highlight.remove();
	inputText.innerHTML = str;
	}

	}</script></body>
	</html>