title: How can I replace certain character when a user is typing on an input field?
body: <p>I am trying to replace some characters on the fly but it is not working.
  Look, I have this code which replaces any characters that are not URL friendly. I mean, the user will be typing on an input to construct a URL:</p>
  
  <pre class="lang-js prettyprint-override"><code>function slugify(string) {
    const a =
      "àáâäæãåāăąçćčđďèéêëēėęěğǵḧîïíīįìłḿñńǹňôöòóœøōõőṕŕřßśšşșťțûüùúūǘůűųẃẍÿýžźż·/_,:;";
    const b =
      "aaaaaaaaaacccddeeeeeeeegghiiiiiilmnnnnoooooooooprrsssssttuuuuuuuuuwxyyzzz------";
    const p = new RegExp(a.split("").join("|"), "g");
  
    return string
      .toString()
      .toLowerCase()
      .replace(/\s+/g, "-") // Replace spaces with -
      .replace(p, (c) =&gt; b.charAt(a.indexOf(c))) // Replace special characters
      .replace(/&amp;/g, "-and-") // Replace &amp; with 'and'
      .replace(/[^\w\-]+/g, "") // Remove all non-word characters
      .replace(/\-\-+/g, "-") // Replace multiple - with single -
      .replace(/^-+/, "") // Trim - from start of text
      .replace(/-+$/, ""); // Trim - from end of text
  }
  </code></pre>
  
  <p>So for example when the user types a space, it should be replace with <code>-</code>, like here:</p>
  
  <pre><code>.replace(/\s+/g, "-") // Replace spaces with -
  </code></pre>
  
  <p>But that's not working. I noticed this one works:</p>
  
  <pre><code>.replace(/&amp;/g, "-and-") // Replace &amp; with 'and'
  </code></pre>
  
  <p>But why not the rest of them? Any ideas?</p>
  
  <p>This is the whole code:</p>
  
  <pre><code>  const handleSiteUrl = (value) =&gt; {
      setNameToUrlAction({
        ...nameToUrl,
        siteUrl: slugify(value.toLowerCase()), // HERE I USE slugify METHOD
      });
    };
  
          &lt;input
            id="siteUrl"
            name="siteUrl"
            className="form-control"
            placeholder="Enter name"
            value={`/${nameToUrl.siteUrl}`}
            onChange={(e) =&gt; handleSiteUrl(e.target.value)}
          /&gt;
  </code></pre>