javascript - 使用 jquery 突出显示页面中的所有逗号

Question

我有一个非常非常简单的问题，但我没有找到答案。

我有一个使用 ajax 的页面，它在其中的一个 div 中一次又一次地更新。

现在，我想突出显示 div 的所有逗号 ,。 例如，它们变成红色。

我如何使用这个 ajax 页面完成它？

我也想尝试使用这个代码，但我做不到

$(document":contains(',')").css("color","red");

我只需要每秒找到那个 div 中的所有逗号并为它们指定样式。

如何用 jquery 做到这一点？

Answer 1

不知道 jQuery，但可以用纯 javascript 来完成。但实际上并没有那么容易。

tl;dr jsFiddle

这个答案不会导致 DOM 重新生效，也不会混淆 javascript 事件!

首先，您需要遍历页面内容并将每个逗号(或每个字符)替换为 <span>或其他节点，以便您可以为其赋予单独的 CSS 样式。让我们从获取文本节点开始:

HTMLElement.prototype.getTextNodes = function(recursive, uselist) {
  var list = this.childNodes;
  var nodes = uselist!=null?uselist:[];
  for(var i=0,l=list.length; i<l;i++) {
    if(list[i].nodeType==Node.TEXT_NODE) {
      nodes.push(list[i]);
    }
    else if(recursive==true&&list[i].nodeType==1&&list[i].tagName.toLowerCase()!="script"&&list[i].tagName.toLowerCase()!="style") {
      list[i].getTextNodes(true, nodes);
    }
  }
  //console.log(nodes);
  return nodes;
}

您现在需要在逗号所在的位置拆分跨度:

/*Turn single text node into many spans containing single letters */
  /* @param
       textNode - HTMLTextNode element
       highlight - the character to highlight
     @return
       null
  */
  function replaceLetters(textNode, highlight) {
    //Get the string contained in the text node
    var text = textNode.data;
    //Generate a container to contain text-node data
    var container = document.createElement("span");
    //Create another span for every single letter
    var tinyNodes = [];
    //Split the letters in spans
    for(var i=0,l=text.length;i<l; i++) {
      //skip whitespace
      if(text[i].match(/^\s*$/)) {
        container.appendChild(document.createTextNode(text[i]));
      }
      //Create a span with the letter
      else {
        //Create a span
        var tiny = document.createElement("span");
        //If the letter is our character
        if(text[i]==highlight) 
          tiny.className = "highlighted";
        tiny.innerHTML = text[i];
        container.appendChild(tiny);
      }
    }
    //replace text node with a span
    textNode.parentNode.insertBefore(container, textNode);
    textNode.parentNode.removeChild(textNode);
  }

上面的函数最初用于动画页面上的所有字母(即使它已经加载)。您只需更改其中一些的颜色。

如果定义了上面的函数，调用这个:

var nodes = document.getElementById("myDiv").getTextNodes(true);
for(var i=0, l=nodes.length; i<l; i++) {
    replaceLetters(nodes[i], ",");
}