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

Question

我的客户要求字母4以红色显示，无论在网站导航中使用哪一个。

例如，他有＆＃39; bikes4kids ＆＃39;作为一个菜单项。

不幸的是，我正在使用一个超级菜单＆＃39;他的Magento网站的样式插件只允许使用纯文本菜单项 - 我无法在菜单项标题框中使用HTML代码，这样就无法使用<span>。

有没有办法用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完成其操作后的某个时间处理文档，您可以尝试以下操作。它将使用提供的类包装提供的字符。可以提供根元素以限制替换的范围。如果没有提供root，它将搜索整个文档。

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

修改的： 修改为在“超级菜单”中查找菜单项... ...我希望如此。在演示网站中，＆＃34; $＆＃34;变量不是jQuery所以我也修改了答案以使用jQuery函数。

在demo site进行测试我发现我修改的字母颜色为黄色，但是左边有一个子弹 - 显然他们的css在左边添加了一个子弹（即：之前）跨度...

插件完成DOM修改后 - 只需在菜单项上运行并搜索和替换＆＃34; 4＆＃34;有彩色跨度

例如

// 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);
})