CSS styling a single character in a word

Question

My client asked that letter 4 be displayed in red, wherever it is used in its navigation on the site.

For example, where it has < bikes4kids ' as a menu item.

Unfortunately, I use the mega-menu style plugin for my Magento site, which only allows text menu items — I cannot use the HTML code in the title bar of the menu item, which removes the chance that I am using it <span>.

Is there any way to achieve this using JS? I guess not only with CSS.

EDIT: My menu I'm working with can be seen here: http://www.magentech.com/extensions/commercial-extensions/item/246-sm-mega-menu-responsive-magento-module

Answer 1

No, in the "text menu items" (as described in the question) you cannot style one character differently than the others (except for a few special cases that are not applicable here: styling the first letter and setting the font of some characters different from others). JavaScript will not help, because you still need to make the character an element, and everything containing the element is, by definition, not plain text.

So, you need to consider other approaches, such as menus with elements that allow some markup.

Answer 2

I have done it.

Please look at the 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.

Testing at the demo site I found that the letter I changed was color, but there was a bullet to the left of it - apparently their css adds the bullet to the left (i.e. .: before) each range ...

After the plug-in completes its DOM modifications - just start the menu items and search and replace “4” with a color range

eg.

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