如何使用JQuery + CSS自动突出显示链接文本中的特定字符？

Question

我正在向web应用程序添加热键，以便为我们的CSR启用键盘快捷键，以减少伤害并增加每小时的呼叫量。我正在使用ASP.net UserControl将javascript注入到页面中，它工作得很好。

我希望控件“只工作”，这样当热键被分配时，使用声明性语法，如果热键字母存在于链接文本中，它将自动突出显示，这样开发人员就不需要做任何事情，还可以保持视觉提示的一致性。

下面是分配热键的代码，如果重要的话：

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

我想要这样的东西：

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

如果有更好的方法，我不赞成在里面注入一个<span/>。

我如何在CSS或JQuery中做到这一点？有没有一种方法可以把一个字母传递给CSS样式，并让它改变显示文本的颜色？当页面加载时，我应该生成javascript来突出显示文本吗？

在这种情况下，你会怎么做？

Answer 1

下面这样的内容会怎么样：

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