Verify if spacebar is pressed and then use jQuery to add a hashtag with multi-language support

Question

Verify if spacebar is pressed and then use jQuery to add a hashtag with multi-language support

I am attempting to use jQuery to add a hashtag (#) after the user types and presses space. I have created a demonstration on CodePen.

In this demo, when you type something like (how are you), the JavaScript code will change it to (#how #are #you).

To achieve this, I am checking the words for adding the #(hashtag) tag using the function addHashtags(text) { ... }.

1-) Everything works correctly for English characters. However, I want to extend this functionality to support multiple languages. The issue arises when typing Turkish characters like (üğşıöç). For example, when I type the word (üzüm) or (hüseyin), the JavaScript should convert them to (#üzüm #hüseyin) but instead, it adds extra symbols like this: (#ü#zü#m #hü#seyin). (Issue Resolved)

2-) Another challenge is with other languages such as Arabic, Azerbaijan, Japanese, and so on. The JavaScript does not add the #(hashtag) tag when typing in these languages. For instance, typing (

私は家族と一緒に行きます

) or (

ผมไปกับครอบครัวของฉัน

) does not trigger any changes. This is a significant problem that requires a solution. (Issue Resolved)

3-) In the demo, I have used textInput. It works on mobile devices but not on Firefox. If I switch to using keypress, the code functions on Firefox but not on mobile. I need the code to work seamlessly across all devices. (Issue Resolved)

// Your custom JS code goes here...

javascript jquery css regex mobile

Answer 1

Answer №1

I have created a solution that is close to perfect for you. Feel free to check it out on Codepen!

Here is the 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 solely for document ready event.
Saves user selection and cursor position.
Pure Vanilla Javascript code.
Swapped content-editable div with a proper <input>.
Triggers on keypress rather than space press.

UPDATE

You are restricted from typing special characters: only letters a-z, 0-9, and whitespaces are allowed. You can customize permitted characters in line 8 (e.g., Russian, Turkish).
Tokens that resemble each other are discarded.

Answer 2

I have created a solution that is close to perfect for you. Feel free to check it out on Codepen!

Here is the 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 solely for document ready event.
Saves user selection and cursor position.
Pure Vanilla Javascript code.
Swapped content-editable div with a proper <input>.
Triggers on keypress rather than space press.

UPDATE

You are restricted from typing special characters: only letters a-z, 0-9, and whitespaces are allowed. You can customize permitted characters in line 8 (e.g., Russian, Turkish).
Tokens that resemble each other are discarded.

Answer 3

Answer №2

JavaScript Regular Expressions in ES5 do not support Unicode characters out of the box. In order to work with Unicode literals, you need to use \u (Unicode escape sequences) or utilize libraries like XRegExp that provide Unicode properties support.

When you incorporate XRegExp into your project, you can convert traditional Regular Expressions into Unicode-aware patterns. This allows you to utilize Unicode properties such as \p{L} or shorthand \pL.

I made some adjustments to your code to enable this functionality:

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"]
         ]);

The first two regexes are familiar, but the third one may seem complex. By breaking it down, you will see that (?:\\s|^) and (?=\\s|$) equate to \b. However, due to the ASCII-only interpretation of word boundary by \b, I had to structure it that way.

Try the live demo!

Breakdown:

\p{L} matches any letter from any language.
\p{N} matches any numeric character in any script.

Learn more about Unicode categories.

Answer 4

JavaScript Regular Expressions in ES5 do not support Unicode characters out of the box. In order to work with Unicode literals, you need to use \u (Unicode escape sequences) or utilize libraries like XRegExp that provide Unicode properties support.

When you incorporate XRegExp into your project, you can convert traditional Regular Expressions into Unicode-aware patterns. This allows you to utilize Unicode properties such as \p{L} or shorthand \pL.

I made some adjustments to your code to enable this functionality:

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"]
         ]);

The first two regexes are familiar, but the third one may seem complex. By breaking it down, you will see that (?:\\s|^) and (?=\\s|$) equate to \b. However, due to the ASCII-only interpretation of word boundary by \b, I had to structure it that way.

Try the live demo!

Breakdown:

\p{L} matches any letter from any language.
\p{N} matches any numeric character in any script.

Learn more about Unicode categories.

Answer 5

Answer №3

To improve the code that replaces spaces with dashes, try using the following:

   $("body").on("keyup", "#text", function() {
      $("#ad_text").html($(this).html().replace(/\s/g,"-"));
      go();
   });

This will automatically update your #ad_text by replacing all spaces with dashes. After this change, transitioning to "#" should be relatively simple.

The original code was incorrectly calling .replace on the jQuery return item rather than the .html.

Answer 6

To improve the code that replaces spaces with dashes, try using the following:

   $("body").on("keyup", "#text", function() {
      $("#ad_text").html($(this).html().replace(/\s/g,"-"));
      go();
   });

This will automatically update your #ad_text by replacing all spaces with dashes. After this change, transitioning to "#" should be relatively simple.

The original code was incorrectly calling .replace on the jQuery return item rather than the .html.

Answer 7

Answer №4

If you want to display the text "#Hi #bro #how #are #you?", you can achieve it using the following code:

$(document).ready(function() {
   $("body").on("keyup", "#text", function(e) {
      // Add space after pressing return
      if(e.keyCode == 13) { 
         $(this).text($(this).text()+' ');
      }
      // Format div content after pressing space or return
      if(e.keyCode == 32 || e.keyCode == 13) {
          var content =  $(this).text();
          // Format content
          content = '#' + content.replace(/#+/g, '').replace(/\s+/g, ' #');
          // Set content
          $(this).html(content);
          // Put cursor at the end of div
          cursorManager.setEndOfContenteditable(this);
      }
   });
});

The solution to move the cursor can be found in cursorManager.setEndOfContenteditable()

1) To detect duplicates, convert the content variable into an array using split(), check for duplicates in this array and then use join() to transform the array back into a string.

2) To prevent entering _-?*/()=&%+^#'<|>.,;! characters, write a function to remove these characters and call it every time a key is pressed. Include your function at the beginning of the keyup event function.

Answer 8

If you want to display the text "#Hi #bro #how #are #you?", you can achieve it using the following code:

$(document).ready(function() {
   $("body").on("keyup", "#text", function(e) {
      // Add space after pressing return
      if(e.keyCode == 13) { 
         $(this).text($(this).text()+' ');
      }
      // Format div content after pressing space or return
      if(e.keyCode == 32 || e.keyCode == 13) {
          var content =  $(this).text();
          // Format content
          content = '#' + content.replace(/#+/g, '').replace(/\s+/g, ' #');
          // Set content
          $(this).html(content);
          // Put cursor at the end of div
          cursorManager.setEndOfContenteditable(this);
      }
   });
});

The solution to move the cursor can be found in cursorManager.setEndOfContenteditable()

1) To detect duplicates, convert the content variable into an array using split(), check for duplicates in this array and then use join() to transform the array back into a string.

2) To prevent entering _-?*/()=&%+^#'<|>.,;! characters, write a function to remove these characters and call it every time a key is pressed. Include your function at the beginning of the keyup event function.

Answer 9

Answer №5

This simple Javascript function efficiently adds a unique tag to each word in a given string:

function addDiszTag(str){
        //  var str = "Hello there how are you?"
        str = str.split(' ');

        //Output will be converted to ["Hello", "there", "how", "are", "you?"]
        var transformedArr = [];
        str.forEach(function(word){transformedArr.push("#"+word) })

        // Resulting array: ["#Hello", "#there", "#how", "#are", "#you?"]

        return transformedArr.join(' '); 

       //Returns "#Hello #there #how #are #you?"

    }

An additional validation could be added to prevent duplicate tags from being generated. I hope this explanation is helpful!

Answer 10

This simple Javascript function efficiently adds a unique tag to each word in a given string:

function addDiszTag(str){
        //  var str = "Hello there how are you?"
        str = str.split(' ');

        //Output will be converted to ["Hello", "there", "how", "are", "you?"]
        var transformedArr = [];
        str.forEach(function(word){transformedArr.push("#"+word) })

        // Resulting array: ["#Hello", "#there", "#how", "#are", "#you?"]

        return transformedArr.join(' '); 

       //Returns "#Hello #there #how #are #you?"

    }

An additional validation could be added to prevent duplicate tags from being generated. I hope this explanation is helpful!

Answer 11

Answer №6

JS does not have a strong understanding of Unicode, so you can use equivalent UTF-16 ranges instead that correspond to the \p{alnum} property.

I suggest pre-compiling this to store it in a global variable.

This regex will match a leading whitespace (or beginning of string) when followed by an alnum character. You can then replace it with the whitespace + #.

The regular expression pattern is for a leading whitespace:

/(^|\s)(?=<see below>/g;

where Rx is used globally like this:

newSrc = strSrc.replace(Rx, "$1#");

The regular expression pattern expressed rawly:

(^|\s)(?=(?:[\u0030-\u0039\u0041-\u005A...]))/g

Answer 12

JS does not have a strong understanding of Unicode, so you can use equivalent UTF-16 ranges instead that correspond to the \p{alnum} property.

I suggest pre-compiling this to store it in a global variable.

This regex will match a leading whitespace (or beginning of string) when followed by an alnum character. You can then replace it with the whitespace + #.

The regular expression pattern is for a leading whitespace:

/(^|\s)(?=<see below>/g;

where Rx is used globally like this:

newSrc = strSrc.replace(Rx, "$1#");

The regular expression pattern expressed rawly:

(^|\s)(?=(?:[\u0030-\u0039\u0041-\u005A...]))/g

Answer 13

Answer №7

My belief is that this solution will suffice.

ATTENTION: I find it peculiar why you specifically required hitting the space or enter key. However, doing so can lead to some complications. For instance, if someone changes their mind and deletes input with the backspace key, the output hash tags will remain unchanged as the event does not get triggered without hitting the spacebar. That's why I utilized the keyup function.

    $("body").on("keypress", "#text", function(e) {
        if (e.which > 33 && e.which < 48 || e.which > 57 && e.which < 65 || e.which > 90 && e.which < 96 || e.keyCode === 13)
        {
            e.preventDefault();
        }
    });
    $("body").on("keyup", "#text", function(e) {
        var array = new Array();
        var diez = new Array();

        temparray = $('.addiez').html().split(" ");
        l = temparray.length;
        temparray[l-1] = temparray[l-1].replace(/&nbsp;/gi,'');

        $.each(temparray, function(i, el){
            el = el.replace(/&nbsp;/gi,'');
            el = el.toLowerCase();
            if($.inArray(el, array) === -1) array.push(el);
        });

        for (var i = 0; i < array.length; i++) {
            diez[i] = "#" + array[i] + " ";
        }
        $("#ad_text").html(diez);
    });

  .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;
   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;
   text-transform: capitalize;
}

<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>
   
   <div class="note">For example: When you write like: Hi bro how are you? Then jquery should change this text like this:
   #Hi #bro #how #are #you? I meant when user pressed space or pressed enter then add diez tag before the text like my exapmle.</div>
</div>

I included text-transform: capitalize; because I prefer it :) However, you have the option to disable it if desired.

Answer 14

My belief is that this solution will suffice.

ATTENTION: I find it peculiar why you specifically required hitting the space or enter key. However, doing so can lead to some complications. For instance, if someone changes their mind and deletes input with the backspace key, the output hash tags will remain unchanged as the event does not get triggered without hitting the spacebar. That's why I utilized the keyup function.

    $("body").on("keypress", "#text", function(e) {
        if (e.which > 33 && e.which < 48 || e.which > 57 && e.which < 65 || e.which > 90 && e.which < 96 || e.keyCode === 13)
        {
            e.preventDefault();
        }
    });
    $("body").on("keyup", "#text", function(e) {
        var array = new Array();
        var diez = new Array();

        temparray = $('.addiez').html().split(" ");
        l = temparray.length;
        temparray[l-1] = temparray[l-1].replace(/&nbsp;/gi,'');

        $.each(temparray, function(i, el){
            el = el.replace(/&nbsp;/gi,'');
            el = el.toLowerCase();
            if($.inArray(el, array) === -1) array.push(el);
        });

        for (var i = 0; i < array.length; i++) {
            diez[i] = "#" + array[i] + " ";
        }
        $("#ad_text").html(diez);
    });

  .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;
   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;
   text-transform: capitalize;
}

<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>
   
   <div class="note">For example: When you write like: Hi bro how are you? Then jquery should change this text like this:
   #Hi #bro #how #are #you? I meant when user pressed space or pressed enter then add diez tag before the text like my exapmle.</div>
</div>

I included text-transform: capitalize; because I prefer it :) However, you have the option to disable it if desired.

Verify if spacebar is pressed and then use jQuery to add a hashtag with multi-language support

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Web Browser Fails to Set Cookie during an Ajax Request

Exploring the benefits of integrating Apache Thrift with TypeScript

Issues arise when attempting to delete messages that have already been retrieved

What steps are needed to create a hover box that appears on the right side of my div?

Merge two arrays of the same size to create a single array of strings

What is the best way to make the current year the default selection in my Select control within Reactive Forms?

Position divs to align text beside icons

Fetching server-side JavaScript source from a relative path within an ASP file

What is the best method for incorporating an Angular Component within a CSS grid layout?

Importing a .js file into HTML with AJAX

Several dropdown menus within the same container, working independently of each other

Whenever I try to relocate my HTML file that references three.js, the three.js library seems to malfunction and stop

Exploring the data types of dictionary elements in TypeScript

Variety of color palettes within a single style sheet

The CSS-styled button I created is designed to display a list and has the functionality of submitting

How can I effectively address issues with jqGrid's sorting and paging functionality?

NodeJs simple mock: Capturing query string parameters with ease

Tips for serving a JSON text file to a client-side AJAX request from a Node.js server

Encountering the error message "Uncaught Error: [vuex] Getters must be functions, but 'getters.getters' is {}. This occurred while splitting the Vuex store into modules in Vue.js."

React Native animation encountered a rendering issue: Invalid transform scaleDisliked value: { "scaleDisliked": 1 }