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

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

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

不幸的是，我正在为他的Magento网站使用一个“mega menu”风格的插件，它只允许纯文本菜单项-我不能在菜单项标题框中使用HTML代码，这就剥夺了我使用

的机会

有没有一种方法可以通过JS实现这一点？我想不仅仅是CSS

编辑：我正在使用的巨型菜单可以在这里看到：

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

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

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

例如

//使用类“menu item”遍历所有dom元素
//-我假设它们下面只存在文本
jQuery（'.sm megamenu子span'）。每个（函数（）{
var$item=jQuery（this）；
var text=$item.text（）；
var modified=text.replace（/4/g，“4”）；
$item.html（已修改）；
})

如果您可以在文档加载完成后或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);
    }
  }
}

---

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

<> P>所以你需要考虑其他方法，比如带有允许标记的项目的菜单。

< P>我做到了。

请看看这个

menu1
骑自行车的孩子
菜单2
var avno=$（“.title:第n个子项（2）”）.text（）；
var avn=平均分割数（'4'）；
可变项目=avn[0]+“4”+avn[1]；
$（“.title:nth child（2）”）.html（项目）；

---

不管怎样（有JS或没有JS），你都必须在HTML元素中包装你想要设置样式的字符，否则你就没有机会设置字符的样式。你不能把这个字符放在一个标记中吗？比如：

bikes4kids

@DanielLisik，我想你应该把这4个包裹起来@皮特：哦，没听到！：）嗯，我想这一点还是可以理解的。@Daniellisk他提到他不能在菜单项中放置HTML代码-他使用的是一个需要纯文本的插件。那是什么特殊的库？在这个问题上有标签吗？他提到使用“mega menu”插件，我做了一个相当小的假设，即菜单项有一些类属性-但是现在看“mega menu”演示，我发现这是一个错误的假设。修复了更好地迭代菜单项的答案。。仍然不完美菜单插件的输入是纯文本的-但是在插件完成了创建DOM的魔法之后，你可以使用javascript来修改它-假设插件只做了一次而不是一次又一次的事情-在演示页面中的一个小测试证明了这一假设是正确的。

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

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