Question

I want to style a certain character in a string via jQuery, but have no clue how to approach that. I have the following situation

<a href="" accesskey="i">Link</a>

Now i want to underline the character in the accesskey (so the 'i' in this case) in the clickable link. So the 'i' in 'Link' should be underlined

Does anybody know how?

Answer 1

My own approach would be:

$('a[accesskey]').each( //selects only those a elements with an accesskey attribute
    function(){
        var aKey = $(this).attr('accesskey'); // finds the accesskey value of the current a
        var text = $(this).text(); // finds the text of the current a
        var newHTML = text.replace(aKey,'<span class="access">' + aKey + '</span>');
        // creates the new html having wrapped the accesskey character with a span
        $(this).html(newHTML); // sets the new html of the current link with the above newHTML variable
    });

JS Fiddle demo.

References:

• has-attribute selector.
• attr().
• replace()
• html()