Having trouble capitalizing first letter of a blockquote
Question
$(document).ready(function() { $("span").wrapInner("<blockquote><q></q></blockquote"); $("blockquote").css("border-top", "1px solid grey"); $("blockquote").css("border-bottom", "1px solid grey"); $("blockquote").css("padding", "5px 0 5px 0"); $("blockquote").css("font-size", "15px"); }); // end ready
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h2>Get going fast</h2> <p>In just the first 6 chapters of this book, you'll learn more about web development than you can from most full books.</p> <p>It's true, In fact, <span>by the end of the crash course in Section 1. you'll be developing web pages the way today's best professionals do.</span> That means you'll be using HTML5 semantic elements to mark up the structure of the content on the page and CSS to format and lay out that content.</p>
I found a solution for how to capitalize the first letter in a string but I don't think I implemented it correctly. I get an error saying "blockquote.substr is not a function." Here is my JQuery:
$(document).ready(function() {
$("span").wrapInner("<blockquote><q></q></blockquote");
$("blockquote").css("border-top", "1px solid grey");
$("blockquote").css("border-bottom", "1px solid grey");
$("blockquote").css("padding", "5px 0 5px 0");
$("blockquote").css("font-size", "15px");
var blockquote = $("blockquote");
blockquote.substr(0,1).toUpperCase() + blockquote.substr(1);
}); // end ready
2 answers
solution1
0 ACCPTED 2020-10-28 14:14:00
The blockquote variable is an HTML element, not a string. First, get it's textContent and call substr on it. You also need to set its text content to your result.
blockquote.textContent = blockquote.textContent.substr(0,1).toUpperCase()+blockquote.textContent.substr(1);
solution2
0 2020-10-28 14:23:52
Well, you need using text() from jQuery or textContent from vanilla javascript
example:
$(document).ready(function() { const blockquote = $("blockquote"); // yep, i like using this const text = blockquote.text().trim(); // do u need new lines? nope... blockquote.css({ // u can using object to pass all css styles "border-top": "1px solid grey", "border-bottom": "1px solid grey", "padding": "5px 0 5px 0", "font-size": "15px" }); blockquote.text(text.charAt(0).toUpperCase() + text.substr(1)); }); // end ready
<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <blockquote> hello wolrd </blockquote> </body> </html>
And if you wanna capitalize all words:
// create a function to capitalize some word
const capitalize = value => value.charAt(0).toUpperCase() + value.substr(1);
// split into array based on spaces, and capitalize all words to finally join to make a full capitalized string
blockquote.text(text.split(' ').map(i => capitalize(i)).join(' '))
Whats happend if you have a multiple items with te selector? you can using each like this:
$(document).ready(function() { const blockquote = $("blockquote"); // yep, i like using this blockquote.each((index, element) => { const text = $(element).text().trim(); // do u need new lines? nope... $(element).css({ // u can using object to pass all css styles "border-top": "1px solid grey", "border-bottom": "1px solid grey", "padding": "5px 0 5px 0", "font-size": "15px" }); $(element).text(text.charAt(0).toUpperCase() + text.substr(1)); }) }); // end ready <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <blockquote> hello wolrd </blockquote> <blockquote> wow </blockquote> </body> </html>
Tip #1:
In jQuery u can get text with
element.text()and set text withelement.text('some text').Tip #2:
In jQuery u can using
element.css('prop', 'value')to apply one style, but if u have more than one, you can tryelement.css({... })to make it more simple and clear..Tip #3
In javascript one string is an array of chars, so you cat pick the first element with index like
text[0]ortext.charAt(0).Tip #4
If you work with html and the text have new lines(
\n), you maybe wanna remove it... please using trim or regex/\n+/gte remove itTip #5
In javascript you can split string based on a specific char using split. It separate all items and returning a array of string, so it make more easy to iterate.
Tip #6
In jQuery u can using CSS selector to pick some element:
#my-element- pick element with specific idblockquote:nth-child(0)- matches elements based on their position in a group of siblingsblockquote + blockquote- blockquote after anotherblockquoteblockquote:first-child- first element...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.