CODEWITHSUNDEEP
jquery
Maurice
Maurice

Reputation: 1092

Style a certain character in a string

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?

Upvotes: 0

Views: 3542

Answers (4)

David Thomas
David Thomas

Reputation: 253308

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:

Upvotes: 4

Jon Raasch
Jon Raasch

Reputation: 3983

There's a plugin called "Highlight" which will highlight bits of text based on a search string. Plugin here.

For usage instructions, see this article. (I wrote for Smashing a while ago)

Upvotes: 0

Briguy37
Briguy37

Reputation: 8402

If it is just for this case, I would do it in the HTML rather than in JQuery:

<a href="" accesskey="i" style="text-decoration:none">L<u>i</u>nk</a>

Note: The "text-decoration:none" is needed to remove the default underline for links, though you should probably set this in CSS.

Here's a fiddle for that method.

If you still want to do it with JQuery, you can just change the link style and inner html to the above.

Upvotes: 0

FishBasketGordo
FishBasketGordo

Reputation: 23132

I replaced the "i" with a span dynamically:

var jq = $('a');
var text = jq.text().replace(jq.attr('accessKey'), '<span style="text-decoration: underline;">i</span>');
jq.html(text);

http://jsfiddle.net/FishBasketGordo/QGEzA/

Upvotes: 1

Related Questions