How can I automatically highlight a specific character in link text using JQuery + CSS?

Question

I'm adding hotkeys to a web application in order to enable keyboard shortcuts for our CSRs to use, to reduce injury and increase calls-per-hour. I'm using an ASP.net UserControl to inject javascript into the page and it's working great.

I want the control to "just work", so that when hotkeys are assigned, using a declarative syntax, if the hotkeyed letter exists in the link text, it will be highlighted automatically, so the developer doesn't have to do anything, and also to maintain consistency in visual cues.

Here's the code to assign hotkeys, if it matters:

<uc:HotKeysControl ID="theHotkeys" runat="server" Visible="true">
<uc:HotKey ControlName="AccStatus$btnInvoiceEverBill" KeyCode="ctrl+v" />
<uc:HotKey ControlName="AccStatus$btnRefund" KeyCode="ctrl+u" />
<uc:HotKey ControlName="thirdControl" KeyCode="ctrl+p" />
</uc:HotKeysControl>

I want something like:

<a href="whatever" name="thirdControl">Make a <span class=hotkey">P</span>ayment</a>

...but I'm not married to the idea of injecting a <span/> in there if there's a better way.

How can I do this in CSS or JQuery? Is there a way to pass in a letter to a CSS style and have it change the color of the text displayed? Should I generate javascript to highlight the text when the page loads?

What would/did you do in this situation?

Answer 1

What about something along the lines of:

$("a:contains('Payment')").html(function(i, old_html) {
  old_html.replace(/Payment/, '<span class="hotkey">P</span>ayment');
})