How can I style the first character of a string?

first-letter css
first-letter not working
css first letter of each word
css first-letter drop cap
css nth-letter
css last letter
css first letter uppercase
css capitalize first letter of sentence

I have no control over the HTML in this project, so everything has to be done with JavaScript/Jquery.

I have multiple pages coming from a server. Some of these tables have footers with footnotes. The first character of these footnotes is either a * or a †

Sometimes the page will have multiple tables.

I can't use ::first-letter, because it selects the symbol AND the first letter. I need the padding to be only to the right of the symbol

I need to add padding to the right of these characters to separate them from the text.

I've successfully been able to get the symbols. As you can see in my code, I select the class, find the spans in the class, get the text, and convert them to sub-strings. I then get the first character of each one, and when I console.log my results, I see the symbols. I'm now trying to wrap them in a span with some inline styling, but I'm getting a "jquery-2.1.4.min.js:3 Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': Only one element on document allowed." error.

The HTML code is generated in xsl documents, but here's the table footer taken from the inspector:

<div class="article-table-descriptions" style="width: 100%;">
    <span id="tblfn4">*footer text.</span>
    <span id="tblfn5">†footer text.</span>
</div>

$(document).ready(function () {

let chars;
let tableFooterSpans = $('.article-table-descriptions').find('span').text().split('.');

$(tableFooterSpans).each(function(i, str){
    chars = str.charAt(0);
    $(chars).wrap("<span style='color: lime;'></span>");
   })
});

try this one:

$(document).ready(function () {

    var span = $('.article-table-descriptions > span');

    span.each(function(index, el){
    
       var span_html =  $(el).html();

       $(el).html("<span style='color: lime;'>"+ span_html.charAt(0)  +"</span>" + span_html.substring(1,span_html.length));

    });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="article-table-descriptions" style="width: 100%;">
    <span id="tblfn4">*footer text.</span>
    <span id="tblfn5">†footer text.</span>
</div>
<div class="article-table-descriptions" style="width: 100%;">
    <span id="tblfn6">*footer text.</span>
    <span id="tblfn7">†footer text.</span>
</div>

<div class="article-table-descriptions" style="width: 100%;">
    <span id="tblfn8">*footer text.</span>
    <span id="tblfn9">†footer text.</span>
</div>

How to get first character of string by Jquery or javaScript?, var str = 'some string'; console.log(str. You can get first character, insert it with a different font color and then add rest of the var span = $('.design span'); var html = span.html(); span.html("<span style='color:red;'>"+ html. Java Object Oriented Programming Programming. A String class can be used to represent the character strings, all the string literals in a Java program are implemented as an instance of a String class. The Strings are constants and their values cannot be changed ( immutable) once created. We can print the first character of each word in a string by using the below program.

without jQuery you can do something like that

let tableFooterSpans = document.querySelectorAll('.article-table-descriptions > span');

tableFooterSpans.forEach(e => e.innerHTML = e.innerHTML.replace(/(†|\*)?/g,"<span style='color: lime;margin-right:5px'>$1</span>"));
<div class="article-table-descriptions">
  <span>†text1</span> <span>*text2</span>
</div>

CSS ::first-letter Selector, The ::first-letter selector is used to add a style to the first letter of the specified selector. Note: The following properties can be used with ::first-letter: font properties  The idea is to go through the string and save in a hash map the number of times each character appears in the string. That would take O (N) \mathcal{O}(N) O (N) time, where N is a number of characters in the string. And then we go through the string the second time, this time we use the hash map as a reference to check if a character is unique

You can try something like this instead of usig wrap()

$(document).ready(function () {

let chars;
let tableFooterSpans = $('.article-table-descriptions').find('span').text().split('.');

console.log("1",tableFooterSpans);

$(tableFooterSpans).each(function(i, str){
    chars = str.charAt(0);
    console.log("2", chars);
    $("#test").append("<span style='color : yellow'>"+chars+"</span>");
   })

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="article-table-descriptions" style="width: 100%;">
    <span id="tblfn4">*footer text.</span>
    <span id="tblfn5">†footer text.</span>
</div>

<div id="test">test</div>

::first-letter, first-letter is a pseudo element which allows you to style the first letter in an element, without needing to stick a tag around that first. #include <cstdio> int main() { char text[] = "h"; printf("%s ", text); char first = text[0]; printf("%c ", first); return 0; } Here you have string h which is sequence of characters containing only one character. :D. Index of character h in that string is 0 so you can get that character with text[0].

First get all the appropriate span elements before you try obtaining the first character. Then loop through spans, getting the first character and getting the string minus first character, wrap the first character, then update span.

$( () => {

  const $spans = $( '.article-table-descriptions > span' );

  $spans.each( ( i, span ) => {
      
    const $span = $( span );
    const str   = $span.text();
    const char  = str.slice( 0, 1 );
    const _str  = str.slice( 1, str.length );

    $span.html( `<span class="highlight--char">${char}</span>${_str}` );
    
  } );
  
} );
.highlight--char {
  margin-right: 0.5rem;
  color: lime;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="article-table-descriptions" style="width: 100%;">
    <span id="tblfn4">*footer text 1a.</span>
    <span id="tblfn5">†footer text 1b.</span>
</div>

<div class="article-table-descriptions" style="width: 100%;">
    <span id="tblfn4">*footer text 2a.</span>
    <span id="tblfn5">†footer text 2b.</span>
</div>

initial-letter, Plus, it's pain to have to apply that class manually any time you want to use it. That where initial-letter comes in: /* Style that first letter! */ .subhead  Ex// user inputs 'ab' for the first string and 'bb' for the second, the output should say that the first string is greater by 1. I'm a novice and any help is much appreciated thanks. Edit: my print statements for my output are not complete

::first-letter (:first-letter) - CSS: Cascading Style Sheets, The ::first-letter CSS pseudo-element applies styles to the first letter of the first line of a block-level element, but only when not preceded by  Using the first approach, we treat the string like an array. i.e. We use the index position of the character to access it. This is possible because strings in PHP can be treated like character arrays (basically, a string is just an array that consists of characters).

How to Capitalize the First Letter of a String in JavaScript, Get the First Letter of the String. You should use the charAt() method, at index 0, to select the first character of the string. var string  If you follow the rule of array initialization then you can write the above statement as follows − char greeting[] = "Hello"; Following is the memory presentation of the above defined string in C/C++ − Actually, you do not place the null character at the end of a string constant. The C compiler automatically places the '\0' at the end of the string when it initializes the array.

::first-letter, Properties used to Style ::first-letter. Only a subset of CSS properties can be used to style ::first-letter , these properties are: Font Properties:  Let's look at some of the operations that can be performed on a C string without modifying the string(s) involved. Number of characters in a string - strlen. strlen returns the number of characters in a C string, excluding the NULL character. Comparison of different strings - strcmp. strcmp is used to compare two different C strings.

Comments
  • Possible duplicate of style first character of a paragraph using jquery
  • Tried that already. I updated the question.
  • add some html to your question
  • There are no HTML pages in this project. It's all generated in xsl files. That being said, I'll pull some of the generated code from the inspector
  • Use regex to check if the character is a letter and do what you need based on the result
  • For some reason, that makes my footer text completely vanish, but I like your approach. I'm going to see if I can tweak it to make it work.
  • @mediabloke check your CSS and DOM tags, probably you have some another markup and you need to mobify something
  • Edited the question to include: Sometimes the page will have multiple tables.
  • that works! Although for some reason, it's pushing the text to the next line.
  • Came here to say that. Changing it to inline-block did it. Thanks everyone, I only hope that the forehead shape in my laptop goes away soon.
  • @mediabloke do you want all the footer text to be on one line even if there is more than one table description?
  • No. I want each footer line to be on it's own row
  • Well, that's what my answer and @20yco's answer is doing is doing. Must be some other styles from your CSS.