用jQuery突出顯示頁面中的所有逗號

Question

我有一個非常非常簡單的問題，但沒有找到答案。

我有一個使用ajax的頁面，它在一個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/