title: JavaScript Unicode's length (astral symbols)
body: <p>I have a <code>&lt; input type="text" ></code> (in HTML) and everytime I add a character I do a <code>if text.length &lt; x {...}</code> (in JavaScript).</p>
  
  <p>The problem is that the Unicode special characters/astral symbols (\u{.....}, the ones with more than 4 hex/ non-BMP characters) "are stored as two code units and so the length property will return 2 instead of 1."</p>
  
  <p>(<a href="https://mixmax.com/blog/unicode-woes-in-javascript" rel="nofollow">https://mixmax.com/blog/unicode-woes-in-javascript</a>)</p>
  
  <p>I wanna be able to get 1 for all symbols or 2, as long as it doesn't mix some with 1 and some with 2 because I have to have a working limit on the size of the visual text.</p>
  
  <p>I think the solutions is here: <a href="https://mathiasbynens.be/notes/javascript-unicode#accounting-for-astral-symbols" rel="nofollow">https://mathiasbynens.be/notes/javascript-unicode#accounting-for-astral-symbols</a> but I'm not sure how to use that.</p>
  
  <p>My if is something like this:</p>
  
  <pre><code>if(document.getElementById("1").value.length&lt;16){
  </code></pre>
  
  <p><strong>Edit (it's working!):</strong></p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;style&gt;
              input{background:white;border:1px solid;height:30;outline-color:black;position:absolute;top:389;width:30}
          &lt;/style&gt;
          &lt;script&gt;
              &lt;!--
                  function Add(symbol){
                      if (countSymbols(document.getElementById("1").value)&lt;16) {
                          document.getElementById("1").value+=symbol}
                      if(document.getElementById("1").value.length==16 &amp;&amp; document.getElementById("1").value=="\u{1F4BB}\u{1F3AE}\u{1F3C3}\u{1F525}\u2764\u{1D7CF}\u{1D7D1}\u{1F4B0}\u2757"){
                          document.getElementById("1").style.background="#00BB00"}
                      if(document.getElementById("1").value.length==16 &amp;&amp; document.getElementById("1").value!="\u{1F4BB}\u{1F3AE}\u{1F3C3}\u{1F525}\u2764\u{1D7CF}\u{1D7D1}\u{1F4B0}\u2757"){
                          document.getElementById("1").style.background="#BB0000"}
                  }
                  function countSymbols(string) {
                      var regexAstralSymbols = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
                      return string
                      // Replace every surrogate pair with a BMP symbol.
                      .replace(regexAstralSymbols, '_')
                      // …and *then* get the length.
                      .length;
                  }
              //--&gt;
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;input readOnly="true" id="1" style="left:573;outline:0;padding:5 8;top:356;width:294"&gt;
          &lt;input onclick="Add('\u{1F4BB}')" style="left:573" type="button" value="&amp;#128187"&gt;
          &lt;input onclick="Add('\u{1F3AE}')" style="left:606" type="button" value="&amp;#127918"&gt;
          &lt;input onclick="Add('\u{1F3C3}')" style="left:639" type="button" value="&amp;#127939"&gt;
          &lt;input onclick="Add('\u{1F525}')" style="left:672" type="button" value="&amp;#128293"&gt;
          &lt;input onclick="Add('\u2764')" style="left:705" type="button" value="&amp;#10084"&gt;
          &lt;input onclick="Add('\u{1D7CF}')" style="left:738" type="button" value="&amp;#120783"&gt;
          &lt;input onclick="Add('\u{1D7D1}')" style="left:771" type="button" value="&amp;#120785"&gt;
          &lt;input onclick="Add('\u{1F4B0}')" style="left:804" type="button" value="&amp;#128176"&gt;
          &lt;input onclick="Add('\u2757')" style="left:837" type="button" value="&amp;#10071"&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>