Random Quote Generator Project - Twitter URL encode problem

1

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

&#8217

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

https://codepen.io/hik/pen/JyYWGa

2

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));
3

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

4

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.

5

Fixed the loading problem.

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

6

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.

7

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 "'"`
console.log(s)
// 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

2 Likes
8

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!

9

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