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


Problem :

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 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" />

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?

Solution :

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');

    CSS Howto..

    CSS: How to load a css file for all browsers except IE?

    How to modify CSS to achieve three lines?

    How to make text flow from left right bootstrap

    how do I select in css so the items appears in hover state In entire page(mega menu)

    How does Gmail prevent overlap for elements that use absolute positioning?

    How to search a particular text within an HTML Text and highlight the search string with a color

    HTML: How to correctly format 4 elements on the same line?

    How to parse xmlwebservice in phonegap

    How to combine 2 SASS functions as they do almost the same thing just using a different calculation?

    How to inject content of CSS file into HTML in Gulp? [closed]

    How to set css class on active menu item using a masterpage?

    How can I modify left property after hide an element using JQuery?

    How to position nav element center under parent div?

    How can I show hidden element when it has focus?

    How to overlay image with color in CSS?

    How to get a frame off animated png using CSS?

    How to menu on one line and always in center?

    How To Fix This “Select” Drop Down Using Css [duplicate]

    CSS/HTML how not to overlap fixed header

    How to make jQuery show() stay on page

    How to change color of button in active state using inline CSS?

    How to stop divs moving under each other when zooming out

    How to invert colors using CSS on hover

    How to position ionic button using CSS

    How to combine jQuery animate with css3 properties without using css transitions?

    Google Maps visual refresh - how do disable font Roboto in InfoWindow

    How do you extend a Django project root HTML file in project apps?

    ng-bind-html adds owns css class 'ng-binding' which brokes all nested css, how get rid of it?

    How to add an icon to a button at the bottom right corner

    How to arrange/align two paragraphs into boxes [duplicate]