How can I style the first character of a string?

Question

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>");
   })
});

Answer 1

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> 

Answer 2

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> 

Answer 3

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> 

Answer 4

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>