Style first character of a paragraph using jquery
You can use CSS3 to create your first character.
p::first-letter {
font-size: 200%;
color: #8A2BE2;
}
Demo: http://jsfiddle.net/vhyqowde/
More information: http://www.w3schools.com/cssref/sel_firstletter.asp
Javascript approach:
$(document).ready(function () {
var elem = $("p").contents().filter(function () { return this.nodeType == 3 }).first(),
text = elem.text().trim(),
first = text.slice(0, 1);
if (!elem.length)
return;
elem[0].nodeValue = text.slice(first.length);
elem.before('<span>' + first + '</span>');
});
source to share
Use a CSS first-letter
selector
p::first-letter {
color: #FF69B4;
}
This will select and style the first letter of each element <p>
. JS Fiddle Demo
source to share
With JQuery: http://jsfiddle.net/2wkjyz4g/2/
var x= $(".about p:eq(0)").text();
var text='<span class="fChar">'+x.charAt(0)+'</span>';
$(".about p:eq(0)").html(text + x.slice(1,x.length));
With css: http://jsfiddle.net/pe5Loaqn/
.about p:first-child:first-letter {
color:red;
}
because you requested a jquery solution and you selected tag 1 ( :eq(0)
) <p>
.
update after @Garconis comment
var parent = "p"
function styleFirst(elem){
var content = $(elem).contents()[0];
if(content.nodeType == 1){
styleFirst(content);
}else if(content.nodeType == 3){
$(elem).html(style(String(content.nodeValue)));
}
}
function style(txt){
var newTxt = '<span class="fChar">' + txt.charAt(0) + '</span>';
return newTxt + txt.slice(1, txt.length);
}
styleFirst(parent);
.fChar {
color:red;
}
span{
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p><span><span>Win</span>ter</span> is <span>here</span> !!!!!!!!!!!</p>
Update in code:
Storing nodes in para tag can also style the 1st text character, even if nested within any other element.
The code can be updated to check if the 1st char will be a space / tab, etc. in style()
, and the subsequent style can be applied.
source to share
After the same initial question, I decided to take bits and pieces of other code and create my own solution / answer. Here is my method.
Demo: http://jsfiddle.net/Garconis/g72a4h03/
Reference notes in jQuery to understand some of the arguments.
(function($) {
// find each instance of your target
$('p').each(function() {
// now check if the first character is "<" character
// if is NOT a "<" character, then continue
if ($(this).html()[0] != "<") {
// good, now search the contents of the first TEXT_NODE within the selector
var node = $(this).contents().filter(function() {
return this.nodeType == 3
}).first(),
// check the start of the string (which is what the ^ is for)
// find any white space (via the "\s")
// and chunks of contiguous whitespace, which is what the + is for on "\s+"
// and keep finding all instances at the start, which is what the global "/g" is for
// and convert them into nothing
text = node.text().replace(/^\s+/g, ''),
// now start at the beginning (0 position) and grab the first character
first = text.slice(0, 1);
// if the first node isn't a TEXT_NODE, then stop here
if (!node.length)
return;
// remove the text character that we grabbed
node[0].nodeValue = text.slice(first.length);
// now add it back, before the node we checked, with a wrapper
node.before('<span class="fs-dropcap">' + first + '</span>');
};
});
})(jQuery);
span.fs-dropcap {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<hr>
<p> "[yo]"This is a test <b> Other HTML <a href="#0;">tester</a> should not be affected by manipulations</b></p>
<hr>
<p> This is a test <b> Other HTML <a href="#0;">tester</a> should not be affected by manipulations</b></p>
<hr>
<p><span>span tag here</span> This is a test <b> Other HTML <a href="#0;">tester</a> should not be affected by manipulations</b></p>
<hr>
<p><a href="#0">test</a> This is a test <b>Other HTML should not be affected by manipulations</b>
</p>
<hr>
<p>This is a test <b>Other HTML should not be affected by manipulations</b></p>
<hr>
<p> This is a test "Other HTML should not be affected by manipulations"
</p>
<hr>
<p><u> tester </u> This is a test "Other HTML should not be affected by manipulations"
</p>
source to share