[Javascript]Regex expression issue
I'm creating a random quote generator, and whatever quote is generated, I want to be able to hit my Twitter button, and that quote then populates in the twitter message box. I got it for the most part, but I'm missing something in my regex expression.
(I have to use regex to take out the <p></p> tags from my JSON data value)
Anytime a quote has a semicolon, starting from the semicolon and on, it doesn't match the rest of the quote.
If it does happen to match my quote, the ending </p> is always there.
The quotes are pulled from an API in JSON format. The value is not always consistent. Sometimes there is a space between the </p> and the inner html content, sometimes there isn't.
OR, if you know a better way I can retrieve the innerhtml and by removing the <p></p> tags, please let me know!
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Random Quote Generator</title>
<script src="jquery-3.2.1.js"></script>
<script src="randomQuoteJS.js"></script>
<link rel="stylesheet" href="font-awesome.css">
<link rel="stylesheet" href="font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Zilla+Slab" rel="stylesheet">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="randomQuoteCSS.css">
</head>
<body>
<div id="quote-box">
<p id='quote'>
</p>
<p id='author'> </p>
<div class='buttons'>
<button id='twitter'>
<i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i>
</button>
<button id='instagram'>
<i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
</button>
<button class='btn' id='quote-button'>New Quote</button>
<div class='quotations' id='open-quotes'>
<i class="fa fa-quote-left" aria-hidden="true"></i>
</div>
<div class='quotations' id='close-quotes'>
<i class="fa fa-quote-right" aria-hidden="true"></i>
</div>
</div>
</div>
</body>
</html>
CSS:
body {
background-color: #6d9eed;
font-family: 'Zilla Slab', serif;
}
#quote-box {
background-color: #ffffff;
border-radius: 5px;
padding: 150px 150px;
position: relative;
margin:8% auto auto auto;
width: 700px ;
text-align: center;
height: 100px;
border: 2px solid #8d8e8c;
}
#twitter {
color: #00aced;
position: absolute;
bottom: 5%;
left: 2%;
}
#instagram {
color: green;
position: absolute;
bottom: 5%;
left: 8%;
}
#quote-button {
position: absolute;
color: #132b82;
bottom: 5%;
font-family: 'Zilla Slab', serif;
right: 10%;
}
#author {
bottom: 80px;
position: absolute;
right: 100px;
}
.quotations {
border: 2px solid #8d8e8c;
border-radius: 20px;
width: 80px;
height: 80px;
text-align: center;
vertical-align: middle;
color: #8d8e8c;
font-size: 300%;
position: absolute;
background-color: white;
line-height: 85px;
}
#open-quotes {
top: -30px;
left: -30px;
}
#close-quotes {
bottom: -30px;
right: -30px;
}
JS:
// This fetches the quote from an API that gives the data in JSON format. Set up aJax to stop caching page
function getQuote () {
$.getJSON(
"https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1",
function(apiResult) {
$('#quote').html(apiResult[0].content);
$('#author').html("- " + apiResult[0].title);
});
}
// This will get you any random integer
function getRandInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min;
}
// This function will get you any random color from the array of colors listed in the function
function getColor() {
var randColors = ['#7cf9cc', '#92f779', '#f77878', '#e8dd66', '#7966e8', '#e866df', '#66e8e1' ];
var newColor = randColors[getRandInt(0, randColors.length)];
$('body').css({'background-color': newColor });
}
// This will set up the Twitter button to launch a new window with the quote populated in the textbox
function twitQuote() {
$('#twitter').on('click', function() {
var theQuote = $('#quote').html();
var removeTags = /[^<p>].*[^<\/p>]/gi;
var newQuote = theQuote.match(removeTags);
window.open('https://twitter.com/intent/tweet?text=' + newQuote);
});
}
// This is the body of the code
$(function() {
$.ajaxSetup({cache: false});
getQuote();
$("#quote-button").on("click", function() {
getQuote();
getColor();
});
twitQuote();
});
Posted Jul 21, 2017, 10:26 PM UTC