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..

    How to get my navbar to fluidly contain the largest element?

    How do I justify a horizontal list?

    How can I slide the sidebar out of view and make the content flexbox resize to fill the void?

    How to make function NOT highlight last row in table?

    How to create image queue effect using CSS3, jQuery, and HTML? [closed]

    background image not shown in div elements in mobile jquery

    I have a CSS file in my App_Themes folder - how can I apply it to my web user control?

    How to place an HTML element over another using CSS

    How can I embed a smartphone simulator in html5? [closed]

    How to make text appear at the top left corner?

    How to set control properties in css?

    How to sort and combine this css rules so it doesn't repeat so much?

    How do you prevent a CSS animation from rerunning when the display property changes?

    How to fix background image inside div

    How can I add my custom style for my bootstrap navbar?

    How to keep active menu item underlined?

    How to make fixed navbar top like w3school

    How to dynamically change CSS style attribute of DIV tag?

    How do I get 3 horizontal divs to stack in different vertical order or flow when browser width decreases?

    How to remove space between two buttons in a table row or “column”?

    How to scroll with large pages with jQuery onepage-scroll plugin?

    How to make a floated div 100% height of its parent?

    CSS: How to drill all the underlying layers up to the background?

    How to use GitHub's primer and octicons?

    How to remove scroll bar using overflow CSS HTML (Possible Positioning Conflict)

    How to use CSS filters in JavaScript?

    How can one select a parent element several levels above the child element utilizing the 'hover' selector and ':has()'?

    How to change height of a dynamically embedded gist?

    How to turn off spell checking in CSS?

    How to persist checking the screen width in Javascript