2

I got from my server long string while part of it is emoji's as unicode text:
I'm using angular 5. not native JS.

"Hello hello \ud83c\udfdb"

The server return the data OK. If I print it as is, the browser is displaying all the emoji's correctly.

In my code I need to print every of my characters as different span tag
For doing that I go over the whole string and print it char by char:

    <span id="col_1">H</span>
    <span id="col_2">e</span>
    <span id="col_3">l</span>
    .
    .
    .
    <span id="col_13">�</span>

What I figure out is that some of the emoji are 2 chars (instead of one - what I thought).
For instance: �� =

How can I get from long string char by char including emoji's? I'm using binding with *ngFor {{character}}

Update 1
When I said char by char:

for (let j = 0; j < currentSentence.length; j++) { // Loop on all chars
    const char = currentSentence[j];
    this.sentencesSplitter[i] = char;
}

And then in my HTML file:

<span *ngFor='let character of sentencesSplitter; let j = index'>{{character}}</span>
motis10
  • 2,484
  • 1
  • 22
  • 46
  • In short my guess https://stackoverflow.com/a/6080299/853041 – Mister Henson Jan 06 '18 at 21:26
  • @MisterHenson No. the server return it OK. my problem is while i split it char by char. – motis10 Jan 06 '18 at 21:32
  • @estus I can't use in angular any of these functions you mention in your link. and when the problem will still exist when I will split the chars. – motis10 Jan 06 '18 at 21:33
  • I believe JS works in UTF-16 internally, so characters with a codepoint above U+10000 will be split in two. Neither half can be displayed independently. These are called surrogate pairs. See https://stackoverflow.com/questions/21397316/split-javascript-string-into-array-of-codepoints-taking-into-account-surrogat – Mark Ransom Jan 06 '18 at 22:01
  • You certainly can use this functions, because this is JS. And it's unclear if there's a need to do that. The question lacks http://stackoverflow.com/help/mcve . And the problem cannot be replicated http://plnkr.co/edit/QNQFTMeh1H5Ka78g0yqC?p=preview – Estus Flask Jan 06 '18 at 22:13
  • @estus Im still not understand. I added more details in my question. Hope it will be more clear. – motis10 Jan 09 '18 at 19:00
  • The problem isn't specific to Angular (as it was shown in the example above, Angular doesn't have problems when bindings are Unicode multibyte chars). It obviously won't work if 1-byte chars reside in different spans. You can try to do that with plain HTML and will get same result. Why would you want to do that? The question is potential XY problem. – Estus Flask Jan 09 '18 at 19:31
  • I was able to use this answer to resolve for me: https://stackoverflow.com/a/54928127/3423513 – lilabnersgal Jun 01 '21 at 15:45

0 Answers0