FIND AND REPLACE TEXT CODE

Tuesday, 29 September 2015

FIND AND REPLACE TEXT CODE

-----------------------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE IN POST HTML SECTION
-----------------------------------------------------------------------------------------------------------------

<html>
<head>
<style type="text/css">
/* general */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
::-moz-selection {
background: #000;
text-shadow: none;
color: #fff;
}
::selection {
background: #000;
text-shadow: none;
color: #fff;
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
/* main styles */
body {

}
a {
color: #353535;
}
a:hover {
color: #555555;
}
h1 {
margin: 0;
font-family: 'Lobster Two', cursive;
font-style: italic;
font-size: 3em;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.6);
}
p {
margin: 0.5em;
}
.row {
width: 100%;
padding: 1em;
clear: both;
}
.col-1-3 {
width: 32%;
margin-right: 2%;
float: left;
}
.last {
margin-right: 0;
}
input[type=text], textarea {
background:url(data:image/gif;base64,R0lGODlhsQBfALMAAO+9jPe9iP+9e/+9hOLBnOnBnMbGwdbGs63G3rXG1r3GzrnG2qXG563G56XG75zG9ywAAAAAsQBfAAAE/lDISau9OOvNZQBgKI5BZ55oqq7s+QHEcRi0gtyMo+98z9wIBc0gI4AGraRyyex8YjbE7kGtWq/YbFb3SygORmRzTC5bPjObQ8tuu9+PnzBsrttPsIMazu/7q3JgAHeEdzAGCAx/i4x+DgwJBgQlhZUsATEJio2cnX0MXwCUlqQYAXoNa56rrG8OCJKjpZaYBg2tuLlvsAWzhQAHUrrDxFsJB4O+Y6cKqsXP0FSgBGLKl8HR2doPCdTWKcAI2+PZx7LfGAAGm+Tt0AgH5+gS6uzu98/w8sqn9vj/xbrNI5AAoMFoDhQkmxXAgLODEIkxODCrQMGIGJ8ptHTAX8aP/rgQECDU8CHIk60cUKxjEaXLYRvJdHxJM5fIMQ5r6ky5UomBnUBZqfQZtKinoSx+Gl3ayMFIFQdMMp0Kp8HTE1GpavVjFavUrWC1NOjFAYDHsGixJNhXQUHat216YjgAt24WBmQvmLXL18paDG77Cn4gdwKBwYMZLJxwEXHfwgC+Ok6LQJbSyXydTgggDnNfA4Y9C25A6bJou08Dn7a7svPquqAFuH79VoEAzrTrIhAQOTdcBh8k+57qAITw4UsV90YeFsGAvczBJpAwO/rU2KatM316WPtUxfTOetc5fUL18TtjS8iOvqaDvLzFtz9puwL7+SffW4CO32V9C/f1/heRfnrJJyBA/11A14EZ4bVBgAy6g5QGATQW4T/qbVDALRfiowBbFxBwXIfFILBYBwuSuI1mKkCoYi4TQjXii510lURWNOpioxIEcJgjKwnAx6OPP3KSwIlLtFRkIwaAmAQAqi3JhwMZ1kHAeVJmEaQl6sz440ROmkFQlljE5Es/ZD5w0zwFRJkjlUh+MyaNCQk5jwQDENBMh3XeqaECBloHip1+poPIfLDEWSiFenqJmQPdhLmoBgXYMlwDBhA6qQqYAHraNJJumkItqQyGqRGikkSAAZq8BWksqc5ySCLEBYFMNbFac4gmjv7zSCTIhJqrrAVAkUAivUqEgBeSLRSg6LC55pEGDsnC8cgNkRCBKrTcqgBAsTIMcSwQ5JaL7RDaOtvtuuy2O0EEAAA7);
font-family:'Comic Sans MS';
font-weight:bold;
color:black;
width: 100%;
padding: 0.5em;
border-style: solid;
border-width: 1px;
border-color: transparent transparent rgba(0,0,0,0.4) transparent;
font-size:22px;
}

button {
display : inline-block;
cursor : pointer;
background-color:#111199;
border-style : solid;
border-width : 1px;
border-radius : 50px;
padding : 10px 18px;
box-shadow : 0 1px 4px rgba(0,0,0,.6);
font-size : 9.5pt;
font-weight : bold;
color : #fff;
text-shadow : 0 1px 3px rgba(0,0,0,.4);
font-family : sans-serif;
text-decoration : none;
}

button:hover {
background-color:Red;
}
.settings {
font-size: 22px;
}
.settings span {
padding-right: 22px;
}
.tab {
padding: 0.5em;
display: inline-block;
cursor: pointer;
}
.copy {
background-color:Green;
color:#FFFFFF;
font-size:22px;
}
.result {
background-color:Orange;
color:#00000;
font-size:22px;
}
textarea {
height: 12em;
display: none;
color: #00000;
font-size: 12px;
padding: 0.7em;
box-shadow: 0 -0.5em 1em rgba(0,0,0,0.05) inset;
}
.show {
display: inline-block;
}
footer {
font-size: 0.7em;
}
footer h2 {
font-size: 1.05em;
display: inline;
}
/* media queries */
@media all and (min-width: 50.1em) {
.text {
margin-top: -1em;
padding-top: 0;
}
}
@media all and (max-width: 50em) {
body {
font-size: 18px;
padding: 0.5em;
}
header img {
width: 35px;
}
h1 {
font-size: 2.25em;
}
.row {
padding: 0.5em 1em;
}
.col-1-3 {
width: 100%;
margin-right: 0;
padding-bottom: 0.25em;
}
.settings {
font-size: 0.9em;
}
}
@media all and (max-width: 22em) {
header img {
display: none;
}
}
</style>

</head>

<body>
<div class="row cf">
<div class="col-1-3">
<input type="text" id="find" placeholder="Find What?">
</div>
<div class="col-1-3">
<input type="text" id="replace" placeholder="Replace with?">
</div>
<div class="col-1-3 last">
<button id="run">Go go go!</button>
<div class="settings">
<span>Ignore Case: <input type="checkbox" id="case"></span>
<span>Match Anywhere: <input type="checkbox" id="any"></span>
</div>
</div>
</div>
<div class="row cf text">
<span class="tab copy show" data-area="copy">Copy</span>
<span class="tab result" data-area="result">Result</span>
<textarea name="copy" id="copy" class="copy show" placeholder="Add the copy you wish to search within here.."></textarea>
<textarea name="result" id="result" class="result"></textarea>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type='text/javascript'>
$(function() {

// get variables
var run = $('#run'),
find = $('#find'),
replace = $('#replace'),
copy = $('#copy'),
result = $('#result'),
paramAny = $('#any'),
paramCase = $('#case'),
flags = 'gm',
tab = $('.tab'),
textarea = $('textarea'),
newCopy = '',
area = '';

// replace on click
run.on('click', function() {
var findVal = find.val(),
replaceVal = replace.val(),
copyVal = copy.val();

if (!paramAny.is(':checked')) {
findVal = '\\b'+findVal+'\\b';
}
if (paramCase.is(':checked')) {
flags = 'gim';
}

newCopy = copyVal.replace(new RegExp(findVal, flags), replaceVal);
copy.removeClass('show');
result.val(newCopy).addClass('show');
});

// switch tabs
tab.on('click', function() {
area = $(this).data('area');
textarea.removeClass('show');
$('#'+area).addClass('show');
});

});
</script>

</body>
</html>