Random Quote Generator Project - Twitter URL encode problem

I’m working on the Random Quote Generator. I’m nearly there, but my tweets are showing


instead of an apostrophe and can’t seem to figure out how to fix it. Is anyone able to assist? My code is here:


Your code isn’t working at all. The screen is stuck on “Loading…” . You also have a typo in your code. Remove the last quotes at the end of your code.

   window.open("https://twitter.com/intent/tweet?text="+encodeURIComponent(quote + author));

Sorry about that! Made some edits just before posting and stuffed that up.

No problem. Have you fixed the issue yet? Since however I am trying, I am not seeing &#8217 anywhere, but as you have decided to use ‘encodeURIComponent’ that is surely why you were getting &#8217 in your tweets.

Fixed the loading problem.

I am using the URIEncode as otherwise if there was any apostrophe it would end the quote at that point

I have the same problem and I also use quotesondesign.com. I have seen others using encodeURIComponent() and it works OK. I even started thinking that there’s something wrong with the quotes from that particular website.
I think it depends on a quote, sometimes I get a proper apostrophe and sometimes just the code ’
I’d like to know what causes the problem and how to solve it too.

this has nothing to do with encodeURIComponent - the problem is in the data returned by the api - it uses HTML entity references for certain unicode characters like fancy apostrophe quotes hyphens etc

’ is the HTML entity for a kind of quote used as apostrophe - it can also be written as ’ using its hex code instead of decimal

you can use any unicode character in javascript using its hex code - not decimal - the notation is different from HTML - for example

let s=`right quote "\u2019" - ascii singlequote "'"`
// right quote "’" - ascii singlequote "'"

there’s a few ways to fix the problem in your code

you could replace each HTML entity with the character it represents - something like

s.replace(/’/g, "\u2019")

this can get tedious for distinct entities - you could use a callback parameter to replace to convert decimal to hex and get the replacement character for any entity but HTML also has hex references as I said earlier - so it gets complicated

the easiest is using the fact the returned data is used in the web page - the webpage converts entities to display real characters - all you have to do is to use the content in the webpage instead of the original data - something like

let displayedquote=document.querySelector(".message").innerText
// tweet displayedquote

this has the advantage of excluding html tags like <p> so you don’t have to do strip them manually


Thank you very much for the explanation. I wanted quick results, but my knowledge is still limited. I think that now I know what I should do to correct the problem.
Thanks a LOT!

Thank you very much for the explanation, it makes a lot of sense now.