style first character of a paragraph using jquery

Question

i\'m looking for a way to style the first character in a paragraph. I\'ve used this function to return the first character

var x= $(\".about p:eq(0)\").text(         


        

Answer 1

After having the same initial question, I decided to take bits and pieces of other's code, and create my own solution/answer. Here is my method.

Demo: http://jsfiddle.net/Garconis/g72a4h03/

Reference notes in the jQuery to understand some of the reasoning.

(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('' + first + '');

    };

  });

})(jQuery);

span.fs-dropcap {
  color: red;
}

 "[yo]"This is a test   Other HTML tester should not be affected by manipulations

    This is a test   Other HTML tester should not be affected by manipulations

span tag here This is a test   Other HTML tester should not be affected by manipulations

test This is a test Other HTML should not be affected by manipulations


This is a test Other HTML should not be affected by manipulations

  This is a test "Other HTML should not be affected by manipulations"


  tester   This is a test "Other HTML should not be affected by manipulations"