CSS 样式化单词中的单个字符

Question

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

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

不幸的是，我正在为他的 Magento 网站使用“超级菜单”样式插件，该插件只允许纯文本菜单项 - 我不能在菜单项标题框中使用 HTML 代码，这剥夺了我使用 @987654322 的机会@。

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

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

Answer 1

不，在“纯文本菜单项”（如问题中所述）中，您不能将一个字符的样式与其他字符不同（在一些非常特殊的情况下，这在此处不适用：设置第一个字母的样式，并设置某些字符的字体与其他字符不同）。 JavaScript 无济于事，因为您仍然需要将字符设置为元素，并且任何包含元素的内容根据定义都不是纯文本。

因此您需要考虑其他方法，例如带有允许某些标记的项目的菜单。

Answer 2

我做到了。

请看看这个Link

<div class="title">menu1</div>
<div class="title">bike4kids</div>
<div class="title">menu2</div>


var avno = $(".title:nth-child(2)").text();
var avn = avno.split('4');
var item = avn[0]+"<span style='color:red'>4</span>"+avn[1];
$(".title:nth-child(2)").html(item);

Answer 3

如果您可以在完成加载后处理文档，或者在 magento 完成操作后的某个时间，您可以尝试以下操作。它将使用提供的类将提供的字符包装在跨度中。可以提供根元素来限制替换的范围。如果没有提供根，它会搜索整个文档。

// Simple function to convert NodeList to Array
// Not suitable for general application
function toArray(obj) {
  var a = [];
  for (var i=0, iLen=obj.length; i<iLen; i++) {
    a[i] = obj[i];
  }
  return a;
}

// Highlight character c by wrapping in a span with class className
// starting with element root. If root not provided, document.body is used
function highlightChar(c, className, root) {

  if (!root) root = document.body;

  var frag, idx, t;
  var re = new RegExp(c);

  // Add tag names to ignore
  var ignoreTags = {'script':'script'};

  // Child nodes is a live NodeList, convert to array
  // so don't have to deal with changing as nodes are added
  var node, nodes = toArray(root.childNodes);
  var span = document.createElement('span');
  span.appendChild(document.createTextNode(c));
  span.className = 'highlightChar';

  for (var i=0, iLen=nodes.length; i<iLen; i++) {
    node = nodes[i];

    // If node is a text node and contains the chacter, highlight it
    if (node.nodeType == 3 && re.test(node.data)) {
      t = node.data.split(re);
      frag = document.createDocumentFragment();

      // Insert higlight spans after first but not after last
      for (var j=0, jLen = t.length-1; j<jLen; j++) {
        frag.appendChild(document.createTextNode(t[j]));
        frag.appendChild(span.cloneNode(true));
      }

      // Append last text node
      if (j > 0 && t[j]) {
        frag.appendChild(document.createTextNode(t[j]));
      }

      // Replace the original text node with higlighted fragment
      node.parentNode.replaceChild(frag, node);

    // Otherwise, if node is an element, process it
    } else if (node.nodeType == 1 && !(node.tagName.toLowerCase() in ignoreTags)) {
      highlightChar(c, className, node);
    }
  }
}

它可用于处理整个文档：

window.onload = function() {
  highlightChar('4','highlightChar');
};

Answer 4

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

在demo site 中进行测试我发现我修改的字母确实是黄色的，但它的左侧添加了一个项目符号 - 显然他们的 css 在每个跨度的左侧（即：之前）添加了一个项目符号。 ..

插件完成其 DOM 修改后 - 只需在菜单项上运行并搜索并用彩色 span 替换“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);
})