0

I came across this pen at codePen, and found a bug. If you type in the following chars in the searchbox:

), (, [, +, \, *, ?

I get the following error (I entered each char separately):

enter image description here

I think the problem is at the regular expression part. Line 19:

var rgx = new RegExp(this.value, "i");

Since there may be other characters I didn't test that can also throw an error, I was thinking to have a regex that removes all chars besides for: a-z, A-Z, 0-9, '#'. How can I achieve that?

I tried the following thinking it would be wrong:

var rgx = new RegExp(this.value, "i");
rgx = rgx.replace(/[^a-z0-9\#]/gi,'');

And not to my surprise I get an error:

Uncaught TypeError: rgx.replace is not a function

How can I replace all chars but these a-z, A-Z, 0-9, '#' using a regex?

CodePen

document.addEventListener("DOMContentLoaded", function() {
  "use strict"
  var style = "" + "<style>" + ".filter .hidden {" + "opacity: 0;" + "}" +
    ".filter > * {" + "position: absolute;" +
    "transition: .5s ease-in-out;" + "}" + "</style>";
  document.head.insertAdjacentHTML("beforeend", style);

  var list = document.querySelectorAll(".filter > *");
  var h = list[0].offsetHeight,
    arr = [],
    i = -1,
    l = list.length;
  var anim = "transform" in document.body.style ? "transform" : "webkitTransform";

  while (++i < l) {
    arr.push(list[i].textContent.trim());
    list[i].style[anim] = "translateY(" + i * h + "px)";
  }

  document.querySelector("input.filter").addEventListener("input", function() {
    var rgx = new RegExp(this.value, "i");
    arr.forEach(function(el, idx) {
      if (rgx.test(el)) list[idx].classList.remove("hidden");
      else list[idx].classList.add("hidden");
      var i = -1;
      var p = 0;
      while (++i < l) {
        if (list[i].className != "hidden")
          list[i].style[anim] = "translateY(" + p++ * h + "px)";
      }
    })
  })
})
@import url(https://fonts.googleapis.com/css?family=Titillium+Web);
 html {
  height: 100%;
}
body {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0;
  font: 14px'Titillium Web', sans-serif;
  letter-spacing: 2px;
  background: -webkit-linear-gradient(320deg, #543958 0%, #a06060 25%, #bea27b 50%, #9ca898 75%, #506d8d 100%) no-repeat center center fixed;
  background: linear-gradient(130deg, #543958 0%, #a06060 25%, #bea27b 50%, #9ca898 75%, #506d8d 100%) no-repeat center center fixed;
}
section {
  -webkit-align-self: top;
  -ms-flex-item-align: top;
  align-self: top;
  margin: 150px 0;
  display: block;
  position: relative;
  width: 380px;
  max-height: 550px;
  color: rgba(244, 230, 254, 0.7);
  background: rgba(199, 131, 252, 0.05);
  border-top: 15px solid rgba(0, 0, 0, 0.15);
  border-bottom: 40px solid rgba(0, 0, 0, 0.06);
  -webkit-filter: drop-shadow(26px 26px 20px rgba(0, 0, 0, 0.5));
  filter: drop-shadow(26px 26px 20px rgba(0, 0, 0, 0.5));
  box-shadow: -4vh -6vh 16vh -6vh rgba(0, 0, 0, 0.2), -4vh 6vh 16vh -6vh rgba(0, 0, 0, 0.15);
}
section header {
  padding: 1em 1.4em;
  background: rgba(0, 0, 0, 0.12);
  margin: 0 auto 0 auto;
}
section header h4 {
  height: 3rem;
  margin: 0 0 1rem 0;
  padding: 0;
  line-height: 1.1rem;
  text-align: center;
  border-radius: 3px;
  font-size: 1.1rem;
}
section header h4 span {
  padding: 1.2rem;
}
section header h4 span.c {
  padding: .5rem;
  background: rgba(0, 0, 0, 0.045);
  border-bottom: 2px solid rgba(233, 205, 254, 0.8);
}
section header input[type="search"] {
  margin: 0 .5rem;
  padding: .5rem;
  width: 95%;
  color: rgba(244, 230, 254, 0.8);
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(210, 158, 250, 0.5);
  font-size: 1.15rem;
  -webkit-transition: translateX 6s ease-in;
  transition: translateX 6s ease-in;
}
section header input[type="search"]:focus {
  outline: none;
  border: 1px solid rgba(210, 158, 250, 0.5);
}
section header input[type="search"]:focus::-webkit-input-placeholder {
  -webkit-transform: translateX(70%);
  transform: translateX(70%);
  opacity: 0;
}
section header input[type="search"]:focus::-webkit-input-placeholder:-moz-placeholder {
  -webkit-transform: translateX(70%);
  transform: translateX(70%);
  opacity: 0;
}
section header input[type="search"]:focus::-webkit-input-placeholder::-moz-placeholder {
  -webkit-transform: translateX(70%);
  transform: translateX(70%);
  opacity: 0;
}
section header input[type="search"]:focus::-webkit-input-placeholder:-ms-input-placeholder {
  -webkit-transform: translateX(70%);
  transform: translateX(70%);
  opacity: 0;
}
section header input[type="search"]:focus::-webkit-input-placeholder::-ms-input-placeholder {
  -webkit-transform: translateX(70%);
  transform: translateX(70%);
  opacity: 0;
}
section header input[type="search"]::-webkit-input-placeholder {
  color: rgba(233, 205, 254, 0.8);
  -webkit-transition: ease-in 0.3s;
  transition: ease-in 0.3s;
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
}
section header input[type="search"]:-moz-placeholder {
  color: rgba(233, 205, 254, 0.8);
  -webkit-transition: ease-in 0.3s;
  transition: ease-in 0.3s;
  transform-origin: 0 50%;
}
section header input[type="search"]::-moz-placeholder {
  color: rgba(233, 205, 254, 0.8);
  -webkit-transition: ease-in 0.3s;
  transition: ease-in 0.3s;
  transform-origin: 0 50%;
}
section header input[type="search"]:-ms-input-placeholder {
  color: rgba(233, 205, 254, 0.8);
  -webkit-transition: ease-in 0.3s;
  transition: ease-in 0.3s;
  transform-origin: 0 50%;
}
section header input[type="search"]::-ms-input-placeholder {
  color: rgba(233, 205, 254, 0.8);
  -webkit-transition: ease-in 0.3s;
  transition: ease-in 0.3s;
  transform-origin: 0 50%;
}
section .filter {
  padding: 1rem 0;
}
section .filter li {
  width: 100%;
  padding: 1rem 0;
  line-height: 1.5rem;
  -webkit-filter: drop-shadow(26px 26px 20px rgba(0, 0, 0, 0.7));
  filter: drop-shadow(26px 26px 20px rgba(0, 0, 0, 0.7));
  list-style-type: none;
  text-align: left;
}
section .filter li span {
  font-size: 1.15rem;
  padding: 1.8rem;
}
section .filter li:nth-child(odd) {
  background: rgba(255, 255, 255, 0.03);
  margin: 0;
}
<section>
  <header>
    <h4>
      <span>Log</span>
      <span>Favorites</span>
      <span class ='c'>Contacts</span>
  </h4>
    <input type='search' placeholder=" Search" autofocus class="filter">
  </header>
  <ul class="filter">
    <li><span class='img'></span><span class='name'>John</span>  <span class='ph'>609-579-1254</span>
    </li>
    <li><span class='img'></span><span class='name'>Diane</span>  <span class='ph'>908-240-2297</span>
    </li>
    <li><span class='img'></span><span class='name'>Mike</span>  <span class='ph'>303-539-1425</span>
    </li>
    <li><span class='img'></span><span class='name'>Mary</span>  <span class='ph'>424-308-9976</span>
    </li>
    <li><span class='img'></span><span class='name'>Adam</span>  <span class='ph'>509-998-0025</span>
    </li>
    <li><span class='img'></span><span class='name'>Billy</span>  <span class='ph'>609-898-3325</span>
    </li>
  </ul>
</section>
Horay
  • 1,388
  • 2
  • 19
  • 36
  • 1
    http://stackoverflow.com/questions/35543445/regex-gives-error-for-certain-chars#comment58775688_35543445 ?? – elclanrs Feb 22 '16 at 21:47
  • Maybe with a negated character class: `[^a-zA-Z0-9#]`? Also, see [*Is there a RegExp.escape function in Javascript?*](http://stackoverflow.com/questions/3561493/is-there-a-regexp-escape-function-in-javascript). – Wiktor Stribiżew Feb 22 '16 at 21:47
  • Possible duplicate of [Escape string for use in Javascript regex](http://stackoverflow.com/questions/3446170/escape-string-for-use-in-javascript-regex) – Necreaux Feb 23 '16 at 03:27

1 Answers1

0

If you do this:

var rgx = new RegExp(this.value, "i");
rgx = rgx.replace(/[^a-z0-9\#]/gi,'');

It is too late to call .replace since error will be thrown while constructing RegExp in first line **if this.value contains regex meta characters e.g. [ ( ) * ? + ] etc.

You should rather do the replacement before constructing your regex object:

var rgx = new RegExp(this.value.replace(/[^a-z0-9#]+/gi,''), "i");
anubhava
  • 761,203
  • 64
  • 569
  • 643