Question

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

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

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

如何使用此 ajax 页面进行操作？

我也想尝试这个代码，但我不能

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

我只需要每秒钟找到该div中的所有逗号，并给它们一种风格。

如何用jquery做到这一点？

Answer 1

不了解jQuery，但可以使用纯javascript完成。但实际上并不那么容易。

tl;dr jsFiddle

这个答案不会导致DOM重新验证，也不会搞乱javascript事件！

首先，您需要遍历页面内容并将每个逗号（或每个字符）替换为<span>或其他节点，以便您可以为其提供单独的CSS样式。让我们从获取textNodes开始：

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], ",");
}

Answer 2

您需要使用HTML标记（例如<span>）包装逗号。

$(window).load(function() {
    $('.target').each(function() {
        var string = $(this).html();
        $(this).html(string.replace(/,/g , '<span class="comma">,</span>'));
    });
});

以下是一个例子：

http://jsfiddle.net/5mh6ja1L/

Answer 3

我不知道如何在jQuery中这样做，但在纯JavaScript中它会是这样的：

var el = document.getElementById("content");
el.innerHTML = el.innerHTML.replace(/,/g, "<b class='highlight'>,</b>");

演示： http://jsfiddle.net/f9xs0c79/

Answer 4

无需循环。您只需选择要替换和替换的容器即可。

$("p").html(
    $("p").html().replace(/,/g,"<span class='comma'>,</span>")
);

http://jsfiddle.net/1570ya75/2/

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

4 个答案:

tl;dr jsFiddle