Twitter Stops The Quote When It Hits Special Chracters

Question

When I tweet the quote out, if the quote contains special characters such as ", ', or : ,the quote will end at whatever character was before the special character. I have used .replace to replace some special characters with the text version but there are too many to replace. How to replace all html or unicode special characters with regular text?

CodePen: https://codepen.io/Wizikal/full/NvYvwz/

Javascipt Part:

$(document).ready(function(){
$('#newQuote').on('click', function(){
$.ajax({
  url: 'https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
  success: function(result){
    var post = result.shift();
    content = post.content;
    title = post.title;
    $('#quote').html(content);
    $('#author').html('~ ' + title);
  },
  cache: false,
})
})

$('#twitterShare').on('click', function(){
var newContent = content
.replace('<p>', '"')
.replace('<br>', ' ')
.replace('</br>', '')
.replace('</p>', '"')     
.replace('&#8216;', "'")
.replace('&#8217;', "'")
.replace('&#8220;', '"')
.replace('&#8221;', '"')
.replace('\u2019', "'")
.replace('&#39;', "'")
.replace('&#59;', ';')
.replace('&#45;', "-")
.replace('U+0027', "'")
.replace('&#1524;', '"')
.replace('U+201C', '"')
.replace('U+2018', "'")
.replace('U+2018', "'")
.replace('U+2019', "'")
.replace('&#1523;', "'")
.replace('U+003B', ';')
.replace('&#894;', ';')
.replace('U+037E', ';')
.replace('&#8228;', '.')
.replace('U+2024', '.')
.replace('&#8229;', '..')
.replace('U+2025', '..')
.replace('&#8230;', '...')
.replace('U+2028', '...')
.replace("'", "'")
.replace(';', ';')
.replace('&#38;', '&');

$(this).attr('href', 'https://twitter.com/intent/tweet?text=' + newContent  + ' ~ ' + title);
})

})

Answer 1

Pass your quote through DOMParser , this will decode the html entities back into their normal character counter parts. You can then get the textContent to get a string without the html tags included

content = (new DOMParser()).parseFromString(content,"text/html").documentElement.textContent;

Since you put the quote into $('#quote') the entity decoding has happened there as well, so you could call text() and get the same string (as long as it is the only thing in that element).

content = $('#quote').text();

Demo

 var content = "<p>Show me someone who has done something worthwhile, and I&#8217;ll show you someone who has overcome adversity. </p>" content = (new DOMParser()).parseFromString(content,"text/html").documentElement.textContent; var link = document.createElement('a'); link.href = 'https://twitter.com/intent/tweet?text='+encodeURI(content); link.innerText = "Right click & open in new tab"; link.target = "_blank"; document.body.appendChild(link);