Using substring method in jQuery
In a series of JavaScript tutorials, I explained with examples of how you can use the substring and substr methods to get substrings.
As such, jQuery is the library of JavaScript; you can use these methods in jQuery as well to get the substrings.
See the following examples of using substring and substr functions in jQuery code.
An example of jQuery substring method with paragraph text
In this example, a string is created by using the $.text method of jQuery where paragraph text is assigned to a variable. After that, the substring method is used to create a substring by using both parameters; start and end indices.
The substring is displayed in a div element by using the $.append method of jQuery. All that code is placed at the click event of the button.
The code:
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
$(".btncls").click(function(){
var source_string = $( ".stringpara" ).text();
var str_sub = source_string.substring(7,37);
$(".substringdiv").append(str_sub);
});
});
</script>
<style>
.stringpara{
width:250px;
height: auto;
padding:20px;
background-color:#9C0747;
color:#fff;
font-size:20px;
}
.substringdiv{
width:250px;
height: auto;
padding:20px;
background-color:#009700;
color:#fff;
font-size:20px;
}
.btncls{
background-color:#F6B33C;
border: #2e6da4;
font-family: Arial, Geneva, Arial, Helvetica, sans-serif;
font-size: 15px;
color: #000;
letter-spacing: 1px;
padding: 8px 12px;
font-size: 14px;
font-weight: normal;
border-radius: 4px;
line-height: 1.5;
text-decoration:none;
}
</style>
</head>
<body>
<h1>A jQuery substring example </h1>
<p class="stringpara">How to use substring method in jQuery code?</p>
<p><button class="btncls">Execute substring method in jQuery</button></p>
<div class="substringdiv"></div>
</body>
</html>
An example of substr method to get substring
Now, the same string as in the above example except using the substr method to get the substring. As such, the substr method also takes two parameters, the start index and length of the substring, I am using both in this example. See the example online by clicking the link or image below.
This jQuery code is used to execute the substr method at the click event of the button. See the complete code for this example:
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
$(".btncls").click(function(){
var source_string = $( ".stringpara" ).text();
var str_sub = source_string.substr(11,23);
$(".substringdiv").append(str_sub);
});
});
</script>
<style>
.stringpara{
width:250px;
height: auto;
padding:20px;
background-color:#9C0747;
color:#fff;
font-size:20px;
}
.substringdiv{
width:250px;
height: auto;
padding:20px;
background-color:#009700;
color:#fff;
font-size:20px;
}
.btncls{
background-color:#F6B33C;
border: #2e6da4;
font-family: Arial, Geneva, Arial, Helvetica, sans-serif;
font-size: 15px;
color: #000;
letter-spacing: 1px;
padding: 8px 12px;
font-size: 14px;
font-weight: normal;
border-radius: 4px;
line-height: 1.5;
text-decoration:none;
}
</style>
</head>
<body>
<h1>A jQuery substr example </h1>
<p class="stringpara">How to use substr method in jQuery code?</p>
<p><button class="btncls">Execute substr method in jQuery</button></p>
<div class="substringdiv"></div>
</body>
</html>