Comment mettre automatiquement en surbrillance un caractère spécifique dans le texte d'un lien en utilisant JQuery + CSS?

Question

J'ajoute des raccourcis clavier à une application Web afin de permettre l'utilisation de raccourcis clavier pour nos CSR, afin de réduire les blessures et d'augmenter les appels par heure. J'utilise un ASP.net UserControl pour injecter javascript dans la page et ça fonctionne très bien. Je souhaite que le contrôle "fonctionne", de sorte que lorsque des raccourcis clavier sont assignés, en utilisant une syntaxe déclarative, si la lettre raccourci existe dans le texte du lien, elle sera mise en évidence automatiquement, de sorte que le développeur n'a pas à faire quelque chose, et aussi de maintenir la cohérence dans les indices visuels.

Voici le code pour attribuer des raccourcis clavier, si elle importe:

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

Je veux quelque chose comme:

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

... mais je ne suis pas marié à l'idée d'injecter un <span/> là-bas s'il y a un meilleur moyen.

Comment puis-je faire cela en CSS ou JQuery? Est-il possible de transmettre une lettre à un style CSS et de changer la couleur du texte affiché? Dois-je générer du javascript pour mettre en évidence le texte lorsque la page est chargée?

Qu'auriez-vous fait dans cette situation?

Answer 1

Qu'en est-il quelque chose le long des lignes de:

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