CSS 为单词中的单个字符设置样式

Question

我的客户要求将字母 4 显示为红色，无论在其网站导航中的任何位置使用。

例如，他将“ bikes4kids ”作为菜单项。

不幸的是，我在他的 Magento 网站上使用了一个“超级菜单”样式的插件，该插件只允许纯文本菜单项 - 我不能在菜单项标题框中使用 HTML 代码，这使我无法使用 <span>.

有没有办法用JS实现这一点？我假设不是单独使用 CSS。

编辑：我正在使用的超级菜单可以在这里看到：http : //www.magentech.com/extensions/commercial-extensions/item/246-sm-mega-menu-responsive-magento-module

Answer 1

编辑：修改为在“超级菜单”中查找菜单项...我希望。在演示站点中，“$”变量不是 jQuery，因此我也修改了答案以使用 jQuery 函数。

在演示站点中进行测试时，我发现我修改的字母颜色为黄色，但在其左侧添加了一个项目符号 - 显然他们的 css 在每个跨度的左侧（即：之前）添加了一个项目符号...

插件完成 DOM 修改后 - 只需运行菜单项并搜索并用彩色范围替换“4”

例如。

// loop over all dom elements with class 'menu-item' 
//  - I assume here below them exist only text
jQuery('.sm-megamenu-child span').each(function() {   
   var $item = jQuery(this);
   var text = $item.text();
   var modified = text.replace(/4/g, "<span style='color:yellow'>4</span>");
   $item.html(modified);
})