Check pressed space then add diez tag using jquery with multi language

Question

I am trying to add Diez tag # after the pressed space using jquery when user type. I have created this DEMO from codepen.io.

In this demo when you write for example (how are you) the javascript code will change it like this (#how #are #you).

I am checking the words for adding #(diez) tag with function addHashtags(text) { ... } this function.

1-) So normally it is working fine for English characters. But I want to do it multiple language. Now the problem is when I type Turkish characters like (üğşıöç). So what happened when I write with the Turkish characters word. You can test it with this word. When I write (üzüm) or (hüseyin) javascript should change this words like (#üzüm #hüseyin) but it is not. It is adding like this (#ü#zü#m #hü#seyin ). (Solved)

2-) Another problem is some other language. Javascript not adding #(diez) tag when user type Arabic, Azerbaijan, Japanese.. etc. Nothing happened when I write like (私は家族と一緒に行きます) or (ผมไปกับครอบครัวของฉัน)etc. This is a big problem for me. I need a solution. (Solved)

3-) If you check DEMO you can see I have used textInput. It isn't work in Firefox but working on mobile devices. So if I use keypress the codes are working on FireFox but not working on mobile. My code should be work with all devices. (Solved)

$(document).ready(function() {
   window.mobilecheck = function() {
      var check = false;
      (function(a) {
         if (
            /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(
               a
            ) ||
            /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(
               a.substr(0, 4)
            )
         )
            check = true;
      })(navigator.userAgent || navigator.vendor || window.opera);
      return check;
   };
   // Move cursor to the end.
   function placeCaretAtEndX(el) {
      el.focus();
      if (
         typeof window.getSelection != "undefined" &&
         typeof document.createRange != "undefined"
      ) {
         var range = document.createRange();
         range.selectNodeContents(el);
         range.collapse(false);
         var sel = window.getSelection();
         sel.removeAllRanges();
         sel.addRange(range);
      } else if (typeof document.body.createTextRange != "undefined") {
         var textRange = document.body.createTextRange();
         textRange.moveToElementText(el);
         textRange.collapse(false);
         textRange.select();
      }
   }

   // Define special characters:
   var charactersX = [
      0,
      32, // space
      13 // enter
      // add other punctuation symbols or keys
   ];

   // Convert characters to charCode
   function toCharCodeX(char) {
      return char.charCodeAt(0);
   }

   var forbiddenCharactersX = [
      toCharCodeX("_"),
      toCharCodeX("-"),
      toCharCodeX("?"),
      toCharCodeX("*"),
      toCharCodeX("\\"),
      toCharCodeX("/"),
      toCharCodeX("("),
      toCharCodeX(")"),
      toCharCodeX("="),
      toCharCodeX("&"),
      toCharCodeX("%"),
      toCharCodeX("+"),
      toCharCodeX("^"),
      toCharCodeX("#"),
      toCharCodeX("'"),
      toCharCodeX("<"),
      toCharCodeX("|"),
      toCharCodeX(">"),
      toCharCodeX("."),
      toCharCodeX(","),
      toCharCodeX(";")
   ];

   $(document).on("textInput", "#text", function(event) {
      var code = event.which; window.mobilecheck() ? event.originalEvent.data.charCodeAt(0) : event.which;
      if (charactersX.indexOf(code) > -1) {
         // Get and modify text.
         var text = $("#text").text();
         text = XRegExp.replaceEach(text, [
            [/#\s*/g, ""],
            [/\s{2,}/g, " "],
            [XRegExp("(?:\\s|^)([\\p{L}\\p{N}]+)(?=\\s|$)(?=.*\\s\\1(?=\\s|$))","gi"),""],
            [XRegExp("([\\p{N}\\p{L}]+)", "g"), "#$1"]
         ]);
         // Save content.
         $("#text").text(text);
         // Move cursor to the end
         placeCaretAtEndX(document.querySelector("#text"));
      } else if (forbiddenCharactersX.has(code)) {
         event.preventDefault();
      }
   });
});

.container {
   position:relative;
   width:100%;
   max-width:600px;
   overflow:hidden;
   padding:10px;
   margin:0px auto;
   margin-top:50px;
}
* {
   box-sizing:border-box;
   -webkit-box-sizing:border-box;
   -moz-box-sizing:border-box;
}
.addiez {
   position:relative;
   width:100%;
   padding:30px;
   border:1px solid #d8dbdf;
   outline:none;
   text-transform: lowercase;
   font-family: helvetica, arial, sans-serif;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
}
.addiez::-webkit-input-placeholder {
   /* Chrome/Opera/Safari */
   color: rgb(0, 0, 1);
}
.addiez[contentEditable=true]:empty:not(:focus):before  {
      content:attr(placeholder);
      color: #444;
    }

.note {
   position:relative;
   width:100%;
   padding:30px;
   font-weight:300;
   font-family: helvetica, arial, sans-serif;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   line-height:1.8rem;
   font-size:13px;
}
.ad_text {
   position:relative;
   width:100%;
   padding:10px 30px;
   overflow:hidden;
   font-weight:300;
   font-family: helvetica, arial, sans-serif;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   line-height:1.8rem;
   font-size:13px;
}

<script src="https://unpkg.com/[email protected]/xregexp-all.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
   <div class="addiez" contenteditable="true" id="text" placeholder="Write something with space"></div>
   <div class="ad_text" id="ad_text"></div>

Answer 1

I made nearly perfect solution for you. Check it out on Codepen!

Complete code:

var input;

function diez(event){
   var s = event.target.selectionStart;
   var e = event.target.selectionEnd;
   var v = event.target.value;
   var c = v.length;
       v = v.replace(/[^a-z0-9\s]/ig, ""); // line 8
   var a = v.split(" ");
   var b = [];

   /* Remove this if-block if you want undeletable diez */
   if(v == ""){
      event.target.value = v;
      return;
   }
   /* --- */

   for(var i = 0; i < a.length; i++){
      var token = a[i];
      if(i == 0) b.push("#" + token);
      else if(i > 0){
         var previous = a[i-1];
         if(previous.toLowerCase() != token.toLowerCase() && token != "")
            b.push("#" + token);
         else if (token == "")
            b.push(token);
      }
   }

   b = b.join(" ");
   c = b.length - c;
   event.target.value = b;
   event.target.selectionStart = s + c;
   event.target.selectionEnd = e + c;
}

$(document).ready(function() {
   input = document.getElementById("text");
   input.addEventListener("keyup", diez, true);
});

• Uses jQuery only for document ready event.
• Keeps user selection and cursor position.
• Vanilla Javascript code.
• Replaced hacky content-editable div with a proper <input>.
• Works on keypress, not on space press.

---

UPDATE

• You can no longer type special characters: anything, except letters a-z, 0-9 and whitespace. You can add whitelisted characters on line 8 (e.g russian, turkish)

• Tokens that look alike are rejected.

Answer 2

JavaScript Regular Expressions are not Unicode-aware, at least talking ES5. To be able to use Unicode literals you have to work with \u (Unicode escape sequences) or libraries like XRegExp that bring support for Unicode properties.

By importing XRegExp to your project, you are able to translate old Regular Expressions to new Unicode-aware patterns. Unicode properties are then available to be used in standard \p{L} or single-letter \pL notation.

I modified your code a little bit to bring such a feature alive:

text = XRegExp.replaceEach(text, [
            [/#\s*/g, ""],
            [/\s{2,}/g, " "],
            [XRegExp(`(?:\\s|^)([\\p{L}\\p{N}]+)(?=\\s|$)(?=.*\\s\\1(?=\\s|$))`, "gi"), ""],
            [XRegExp(`([\\p{N}\\p{L}]+)`, "g"), "#$1"]
         ]);

First two regexes are easy to understand (you had them before) but third seems to be pell-mell but if you be more precise about it you'll find that (?:\\s|^) and (?=\\s|$) both corresponds to \b and since \b uses ASCII-only interpretations of word boundary I had to work it out like that.

Live demo

Breakdown:

• \p{L} any kind of letter from any language.
• \p{N} any kind of numeric character in any script.

More about >Unicode categories<.