search

tameemsafi / typewriterjs

A simple yet powerful native javascript plugin for a cool typewriter effect.
https://www.npmjs.com/package/typewriter-effect
MIT License
2.44k stars 219 forks source link

HTML entities ampersand misinterpreted #104

Open seangoogoo opened 3 years ago

seangoogoo commented 3 years ago

I have noticed an issue with the ampersand character.

If I write this : const mytypeWTtxt = new Typewriter('#myDiv', { string: 'business & Co', autostart: true });

TypewriterJS will correctly write the "&".

If I write this : const mytypeWTtxt = new Typewriter('#myDiv', { string: '<strong>business & Co</strong>', autostart: true });

TypewriterJS will write "&" as the separated characters of the ampersand HTML entity. It only happen when the ampersand is nested inside an HTML tag. It also only happen with this particular character: not @ nor % nor none else.

To get around this issue, I used this stringSplitter hack : const stringSplitter = string => { const splitter = string.replace('&amp;', '&'); return splitter.split(''); }; const mytypeWTtxt = new Typewriter('#myDiv', { string: '<strong>business & Co</strong>', autostart: true, stringSplitter }); Maybe there's a better way to write it. Hope you can give an eye on this issue.

PowerWeb5 commented 3 years ago

@tameemsafi this is a major issue for me as well. Can you please fix and publish an NPM update?

ShayanTheNerd commented 1 year ago

This is a copy of #89

ShayanTheNerd commented 1 year ago

I have noticed an issue with the ampersand character.

If I write this : const mytypeWTtxt = new Typewriter('#myDiv', { string: 'business & Co', autostart: true });

TypewriterJS will correctly write the "&".

If I write this : const mytypeWTtxt = new Typewriter('#myDiv', { string: '\<strong\>business & Co\</strong\>', autostart: true });

TypewriterJS will write "&" as the separated characters of the ampersand HTML entity. It only happen when the ampersand is nested inside an HTML tag. It also only happen with this particular character: not @ nor % nor none else.

To get around this issue, I used this stringSplitter hack : const stringSplitter = string => { const splitter = string.replace('&amp;', '&'); return splitter.split(''); }; const mytypeWTtxt = new Typewriter('#myDiv', { string: '\<strong\>business & Co\</strong\>', autostart: true, stringSplitter }); Maybe there's a better way to write it. Hope you can give an eye on this issue.

Just found out that it's been answered at #140 and the solution is using Unicode representation of the character. (Also, check #89)