Have Geek Brain

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

I am adding hotkeys to a web application to use shortcuts for our CSRs to reduce trauma and increase calls per hour. I am using ASP.net UserControl to inject javascript into a page and it works great.

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

Here's the code for assigning 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 need 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 ​​squirting <span/>

there if there is a better way.

How do I do this in CSS or JQuery? Is there a way to render the letter in CSS style and change the color of the displayed text? Should I generate javascript to highlight text on page load?

What would you do in this situation?

+2


a source to share


1 answer


Sort of:



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


a source






More articles:


All Articles