First and Last Word Selector using jQuery+Css

by Venkatesh Dematti

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!DOCTYPE html>
<!-- Code By Webdevtrick ( https://webdevtrick.com ) -->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>First word and Last Word Selector | Webdevtrick.com</title>
  <link rel="stylesheet" href="style.css">

</head>
<body>
    <div id="firstWord">Web Dev Trick is a blog for web designers, graphic designers, web developers & SEO Learner as well as freelancers seeking to broaden their mind and also enhance their skills.
        Web Dev Trick is a blog for web designers, graphic designers, web developers & SEO Learner as well as freelancers seeking to broaden their mind and also enhance their skills.
        Web Dev Trick is a blog for web designers, graphic designers, web developers & SEO Learner as well as freelancers seeking to broaden their mind and also enhance their skills.
    </div>
    <div id="lastWord">Web Dev Trick is a blog for web designers, graphic designers, web developers & SEO Learner as well as freelancers seeking to broaden their mind and also enhance their skills.
        Web Dev Trick is a blog for web designers, graphic designers, web developers & SEO Learner as well as freelancers seeking to broaden their mind and also enhance their skills.
        Web Dev Trick is a blog for web designers, graphic designers, web developers & SEO Learner as well as freelancers seeking to broaden their mind and also enhance their skills.
    </div>

<script src=''></script>
<script  src="function.js"></script>

</body>
</html>

CSS

/** Code By Webdevtrick ( https://webdevtrick.com ) **/
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
div {
  font-family: 'Open Sans', sans-serif;
  width: 400px;
  text-align: justify;
  margin: 20px auto;
  font-size: 1rem;
}
.firstWord {
  color: red;
  font-weight: 900;  
  font-size: 1.5rem;
}
.lastWord {
  color:#fd9d08;
  font-weight: 900;
  font-size: 1.5rem;
}

JavaScript

// Code By Webdevtrick ( https://webdevtrick.com )
$.fn.lastWord = function() {
  var text = this.text().trim().split(" ");
  var last = text.pop();
  this.html(text.join(" ") + (text.length > 0 ? " <span class='lastWord'>" + last + "</span>" : last));
};


$.fn.firstWord = function() {
  var text = this.text().trim().split(" ");
  var first = text.shift();
  this.html((text.length > 0 ? "<span class='firstWord'>"+ first + "</span> " : first) + text.join(" "));
};

$("#firstWord").firstWord();
$("#lastWord").lastWord();