使用jQuery將每個*包裝在頁面上使用jQuery

我需要用<span class="red"></span>將每個星號包裝在頁面上。我嘗試過的幾件事不起作用。我想這是歸結爲我需要搜索一個特定字符的頁面，我不知道如何做到這一點。使用jQuery將每個*包裝在頁面上使用jQuery

2013-04-26 JacobTheDev

你爲什麼要這麼做？我相信有更好的方法來實現你想要做的事情。 – 2013-04-26 14:52:25

我第二次Vega的評論，在這將是資源密集型的，因爲你將不得不檢查整個頁面的特定字符。 – user1477388 2013-04-26 14:53:46

這有點難以解釋，但基本上，這樣做比修改我爲頁面編寫的整個腳本更容易。 – JacobTheDev 2013-04-26 14:54:36

對於沒有更換整個HTML（確實態度不好），我們可以做的元素快速操作：

var specialTags = ["script", "style"].join("|"), 
    re = new RegExp("^(?:" + specialTags + ")$", "i"); 

for (var els = document.getElementsByTagName("*"), i = els.length; i--;) { 
    var el = els[i]; 

    if (re.test(el.tagName)) 
     continue; 

    for (var j = 0, childs = el.childNodes, lj = childs.length; j < lj; j++) { 
     var child = childs[j]; 
     if (child.nodeType === 3 && child.nodeValue.indexOf("*") > -1) { 
      var segments = child.nodeValue.split("*"); 
      for (var k = 0, lk = segments.length; k < lk; k++) { 
       el.insertBefore(document.createTextNode(segments[k]), child); 
       if (k < lk - 1) { 
        var span = document.createElement("span"); 
        span.className = "red"; 
        span.appendChild(document.createTextNode("*")); 
        el.insertBefore(span, child); 
       } 
      } 
      el.removeChild(child); 
     } 
    } 
}

這是純粹的JavaScript，不需要jQuery，這不能真正幫助這裏。

DEMO：http://jsfiddle.net/T4ZXA/5/

來源

2013-04-26 15:21:17 VisioN

+ 999，我接近這個，卡在拆分部分;） – Dogbert 2013-04-26 15:25:54

這種方法的*** REAL SPEED ***在這裏演示：http：//jsperf.com/replace-text-with-標籤。 – VisioN 2013-04-26 15:32:08

+1請記住添加'*'到標籤的內容（這是OP想要的） – MMM 2013-04-26 15:34:55

這個怎麼樣...

http://jsfiddle.net/n3Sqn/

$("body:contains(*)").contents().each(function() { 
    if(this.nodeType == 1) 
    { 
     $(this).html($(this).html().replace(/\*/g, "<span class=\"red\">*</span>")) 
    } 
});

來源

2013-04-26 14:59:42 PSL

+1這真棒！ – 2013-04-26 15:20:08

你會想在nodeType == 3上做到這一點，以免替換html中的* – 2013-04-26 15:20:10

我最初嘗試，但它並沒有取代HTML中的文本，所以我需要獲取特定文本的父節點..因此嘗試使用Nodetype元素。也許我做錯了什麼...... – PSL 2013-04-26 15:21:44

這是一個有點髒和危險的（在下面解釋），但你可以嘗試以下方法：？

var allHTML = $("body").html(); 
allHTML = allHTML.replace(/\*/g, "<span class=\"red\">*</span>"); 
$("body").html(allHTML);

http://jsfiddle.net/6rDK4/

注意：正如Dogbert指出的那樣，這可能會取代HTML標記中的*字符，例如節點屬性。

編輯：請記住，這可能會重新附加您身上的所有腳本！嘗試用您的主容器替換body。

EDIT2：VisioN發佈了一個更詳盡但更安全的解決方案。

來源

2013-04-26 15:03:42 MMM

這將取代節點屬性中的「*」。 – Dogbert 2013-04-26 15:04:52

@Dogbert：這是真的，但是我不認爲你經常在屬性中使用這樣的字符？儘管如此，我會將其添加到答案中。 – MMM 2013-04-26 15:05:40

呃。不幸的是，我試圖編輯的東西在屬性中有*。謝謝，但是，這將解決問題，否則。我只需要靜靜地做，這將需要更長的時間。 – JacobTheDev 2013-04-26 15:09:38

沒有使用jQuery所以它可能會快一點，絕對不依賴於庫：

(function(str,e){ 
    var regex = new RegExp(str, 'gi'); 
    e.innerHTML = e.innerHTML.replace(regex, '<span class="red">*</span>'); 
})('*',document.body);

來源

2013-04-26 15:11:39 Joshua

不幸的是它也有同樣的缺點。 – MMM 2013-04-26 15:14:08

這將工作，而不是取代*在不應該的標籤。

http://jsfiddle.net/DR6Ca/2/

var text = $("body").find(":contains(*)").contents().filter(function() { 
    //Don't include css or script tags, all other text nodes are fine. 
    return this.nodeType == 3 
     && ($(this).parent().get(0).tagName.toUpperCase() !== "SCRIPT") 
     && ($(this).parent().get(0).tagName.toUpperCase() !== "STYLE"); 
}).replaceWith(function() { 
    return this.textContent.replace(/\*/g, "<span class=\"red\">*</span>");

您可以在此的jsfiddle測試別人的代碼，看看他們保持「喜」藍與否。如果它不保持藍色，他們有一個錯誤。

來源

2013-04-26 15:35:58

使用jQuery將每個*包裝在頁面上使用jQuery

回答

相關問題