title: Filtering a list of strings based on user locale
body: <p>When working on a JavaScript project with AngularJS 1.6, I have a list of strings which I'd like to filter. For instance, assume my list contains <em>árbol</em>, <em>cigüeña</em>, <em>nido</em> and <em>tubo</em>.</p>
  
  <p>When filtering strings in Spanish, if I filtered for "u", I'd expect both <em>cigüeña</em> and <em>tubo</em> to appear, which would be the most natural result for a Spaniard. However, this is not the case in German - u and ü are different letters and thus a German will not want to see <em>cigüeña</em> on the list. So I am looking for a way to make my list filtering aware of the user's locale.</p>
  
  <p>I happen to have an object containing lots of diacritics, such that:</p>
  
  <pre><code>diacritics["á"] = "a";
  diacritics["ü"] = "u";
  // and so on...
  </code></pre>
  
  <p>This is what my filtering code looks like:</p>
  
  <pre><code>function matches(word, search) {
      var cleanWord = removeDiacritics(word.toLowerCase());
      var cleanSearch = removeDiacritics(search.toLowerCase());
      return cleanWord.indexOf(cleanSearch) &gt; -1;
  }
  
  function removeDiacritics(word) {
      function match(a) {
          return diacritics[a] || a;
      }
      return text.replace(/[^\u0000-\u007E]/g, match);
  }
  </code></pre>
  
  <p>The above code just removes all diacritics, so I thought to make it aware of the user's locale. Thus, I changed the match() function to this:</p>
  
  <pre><code>function match(a) {
      if (diacritics[a] &amp;&amp; a.localeCompare(diacritics[a] === 0) {
          return diacritics[a];
      }
      return a;
  }
  </code></pre>
  
  <p>Unfortunately, this doesn't work. The localeCompare function returns the same values when comparing "u" and "ü" with the German and Spanish locales, so that was not the answer here. I've gone over the <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare" rel="noreferrer">reference for the localeCompare method</a> and tried the usage and sensitivity options, but they don't seem to help much here.</p>
  
  <p>How could I tweak my code for this to work? Is there any library which can handle this properly for me?</p>