Back

Technologies:

javascriptjavascript
reactjsreactjs
avatar
Tolerim
a month ago

How can I create user initials when an emoji is the starting character in the name or surname?

Within my React application, there is a function responsible for generating user initials based on their first and last name. The function is as follows:

@computed public get initials() {
  const firstNameLetter = this.firstName
    ? this.firstName[0].toLocaleUpperCase()
    : '';
  const lastNameLetter = this.lastName
    ? this.lastName[0].toLocaleUpperCase()
    : '';

  return `${firstNameLetter}${lastNameLetter}`;
}
This logic functions correctly except when the first or last name begins with an emoji. In those cases, the emoji is not properly displayed due to the code breaking the emoji with insufficient character handling.

Are there any methods of detecting that the initial character is an emoji and adjusting accordingly? Alternatively, is there a more effective way of generating user initials that can better handle emojis?

Answers(2)
avatar
Vogi
a month ago
Verified Answer
Yes, there are ways to detect if the initial character is an emoji and adjust accordingly. One way is to use the Unicode property escapes in JavaScript regular expressions to check for various things like emojis and currency symbols. Here's an example of how you can use it:
const emojiRegex = /p {Emoji}/u;
emojiRegex.test ('\uD83D\uDE0A'); // true
Another way is to use the String.fromCodePoint method. Here's an example of how you can use it:
const emoji = String.fromCodePoint(0x1F600);
As for generating user initials that can better handle emojis, one approach is to use the emoji-regex package. This package provides a regular expression for matching emojis in JavaScript. You can use this regular expression to replace any emojis in the name with a placeholder character before generating the initials. I hope this helps!

Sources

How to check if a string contains emojis in JavaScript?Using Emojis in HTML, CSS, and JavaScript | KIRUPAHow to render emojis with JavaScript - DEV Communityjavascript - Add emojis to input - Stack OverflowHow to insert emoticons chars into JS script - Stack OverflowEmojis in Javascript | Javascript & Machine Learning - Medium
avatar
Tolerim
a month ago
It is possible to detect emojis in JavaScript strings using different methods. One possible solution to the problem you described would be to use the emoji-regex library to identify emojis in the string and adjust the logic for getting the first character accordingly. Here's an example of how you could modify the initials function using emoji-regex:
import emojiRegex from 'emoji-regex';

// ...
@computed public get initials() {
  const emojiMatcher = emojiRegex();
  let firstNameLetter = '';
  let lastNameLetter = '';

  // Check if the first character of the first name is an emoji
  if (this.firstName && emojiMatcher.test(this.firstName[0])) {
    // Get the emoji as a standalone string
    const matchedEmoji = emojiMatcher.exec(this.firstName)[0];
    // Use the full emoji and its modifiers as the first letter
    firstNameLetter = matchedEmoji;
  } else {
    // Use the first uppercase character as the first letter
    firstNameLetter = this.firstName
      ? this.firstName[0].toUpperCase()
      : '';
  }

  // Repeat the same logic for the last name
  if (this.lastName && emojiMatcher.test(this.lastName[0])) {
    const matchedEmoji = emojiMatcher.exec(this.lastName)[0];
    lastNameLetter = matchedEmoji;
  } else {
    lastNameLetter = this.lastName
      ? this.lastName[0].toUpperCase()
      : '';
  }

  return `${firstNameLetter}${lastNameLetter}`;
}
In this example, we import the emoji-regex library to create a regular expression for matching emojis. We then check if the first character of the first and last name is an emoji using the regular expression. If it is, we extract the emoji as a standalone string and use it as the first letter. Otherwise, we use the first uppercase character as before. Note that this is just one possible solution and there might be other ways to resolve the issue of emojis getting broken in your code. As for creating initials, there are different algorithms you could use, such as taking the first and last non-empty word in the name or generating a hash code based on the name and using it to pick characters. It all depends on your specific requirements and use case.
;