Skip to content

Instantly share code, notes, and snippets.

/index.html

Created March 20, 2017 14:55
Show Gist options
  • Save anonymous/0addc4726095cb5682ba61c0f67d0b0b to your computer and use it in GitHub Desktop.
Save anonymous/0addc4726095cb5682ba61c0f67d0b0b to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/kolitediwi
Raw
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
[email protected] [email protected]
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>
Raw
jsbin.kolitediwi.css
.highlight
{
background-color:yellow;
}
Raw
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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment