<h2><code>/B[a-zA-Z\d]+/g</code></h2>
<div>
Type your text to test for a match:
<input id="txt_test" type="text" />
<button onclick="fn_test()">Check</button>
<br />
<output> </output>
</div>
<div>
Type your text to show matches found:
<input id="txt_match" type="text" />
<button onclick="fn_match()">Find Match</button>
<br />
<output> </output>
</div>
<div>
Type your text to replace the matched parts:
<input id="txt_replace" type="text" />
<button onclick="fn_replace()">Replace</button>
<br />
<output> </output>
</div>
div{
margin-bottom:40px;
}
output{
height: 40px;
font-style: italic;
font-weight: bold;
}
body, input, button{
font-family: bookman old style;
font-size: 12pt;
}
input{
outline:none;
border: none;
border-bottom: 2px dashed indianred;
}
button{
margin-left: 10px;
border: none;
background: skyblue;
cursor: pointer;
border-radius: 2px;
box-shadow: 2px 3px 5px grey ;
padding: 6px;
}
input{
width: 300px;
}
button:focus{
box-shadow: 1px 2px 3px grey;
}
var regex = /B[a-zA-Z\d]+/g;
function fn_test() {
var txt_test = document.getElementById("txt_test").value;
if (regex.test(txt_test))
document.querySelector('output').textContent = "✔ A match found!";
else
document.querySelector('output').textContent = "✘ No match is found!";
}
function fn_match() {
var txt_match = document.getElementById("txt_match").value;
ary = txt_match.match(regex);
if (ary === null)
document.querySelectorAll('output')[1].textContent = '✘ No match is found to show!';
else
document.querySelectorAll('output')[1].textContent = 'matches are: ' + ary.toString();
}
function fn_replace() {
var txt_replace = document.getElementById("txt_replace").value;
document.querySelectorAll('output')[2].textContent = txt_replace.replace(regex, "#");
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.