I'm using Typed.js in my website to loop through a bunch of quotes about volunteering. When I saw it running, everything is working how it is supposed to be working. That is until the quote with a semicolon ran through. When it was typing it, everything was fine, but when it was untyping it, it would untype it normally until it got to the semicolon. When it got to the semicolon, it just completely deleted the whole line instead of continuing the animation of untyping it.
Here's my code:
var data = {
strings: ["“<i>As you grow older, you will discover that you have two hands — one for helping yourself; the other for helping others.</i>” — Audrey Hepburn", "“<i>Never doubt that a small group of thoughtful, committed citizens can change the world; indeed, it’s the only thing that ever has.</i>” – Margaret Mead", "“<i>The best way to find yourself is to lose yourself in the service of others.</i>” – Gandhi", "“<i>Volunteering is at the very core of being a human. No one has made it through life without someone else’s help.</i>” – Heather French Henry", "“<i>Volunteerism is the voice of the people put into action. These actions shape and mold the present into a future of which we can all be proud.</i>” – Helen Dyer"],
typeSpeed: 40,
backSpeed: 20,
shuffle: true,
loop: !0
};
new Typed('.animated-text', data);
And here's a small video to prove it:
https://im3.ezgif.com/tmp/ezgif-3-425cf91d8c.gif
As you can see in the gif, the quote with the semicolon types out just fine, but when it backspaces, or untypes, it doesn't untypes until the semicolon and just deletes the line. When it goes on the the next quote, a quote that doesn't a have semicolon, it types and untypes just fine.
My question is why is the happening and how to fix this.
Thank you! Any responses are appreciated!
You can fix this by encoding the semicolon its the html entity variant ;.
This is because typed.js sees a semicolon and tries to parse the characters before that semicolon as an html entity, and since there is no ampersand to indicate the start of such an html entity it deletes the rest of the string.
Example of ampersand and semi (incorrectly) parsed as html entity
Your example
var data = {
strings: ["“<i>As you grow older, you will discover that you have two hands — one for helping yourself; the other for helping others.</i>” — Audrey Hepburn", "“<i>Never doubt that a small group of thoughtful, committed citizens can change the world; indeed, it’s the only thing that ever has.</i>” – Margaret Mead", "“<i>The best way to find yourself is to lose yourself in the service of others.</i>” – Gandhi", "“<i>Volunteering is at the very core of being a human. No one has made it through life without someone else’s help.</i>” – Heather French Henry", "“<i>Volunteerism is the voice of the people put into action. These actions shape and mold the present into a future of which we can all be proud.</i>” – Helen Dyer"],
typeSpeed: 40,
backSpeed: 20,
loop: !0
};
new Typed('.animated-text', data);