<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>&nbsp;</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>&nbsp;</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>&nbsp;</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, "#");
 

}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.