[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

13
Loading comments…