查找文檔中的所有數字並設置它們的樣式

Question

我目前正在使用JavaScript在我的.html文件（實際上只是在#wrapper div）中查找所有數字的網站（個人）。我希望他們都被着色後。我的代碼如下：

window.onload=function(){ 
    var str = document.getElementById("wrapper").innerHTML; 

    var patt =/\d+/g; 

    var res = str.match(patt); 
    res = str.replace(patt, "<span class='em'>" + res + "</span>"); 

    document.getElementById("wrapper").innerHTML = res; 

    window.alert(res) 
}; 

這段代碼的結果是，每個數字被由包含在一排，這顯然不是我想要的東西中所標示的地區的每一個數字的字符串替換。 我甚至用for-loop試過了，但那也沒用。

我感謝您的幫助！

Answer 1

替換這些行：

var res = str.match(patt); 
res = str.replace(patt, "<span class='em'>" + res + "</span>"); 

與

var res = str.replace(patt, "<span class='em'>$&</span>"); 

特殊標記$&告訴replace以包括在替換字符串位置匹配的文本。 （如果在某些點你在正則表達式使用捕獲組，則可以用$1引用那些以及[用於第一酮]，$2 [用於第二酮]等）

實施例：

var wrapper = document.getElementById("wrapper"); 
 
wrapper.innerHTML = wrapper.innerHTML.replace(/\d+/g, '<span class="em">$&</span>');

.em { 
 
    color: red; 
 
}

<div id="wrapper">This is the wrapper with numbers in it. Like 123. And 456.</div>

---

注意：如果您對包裝元素中的元素任何事件處理程序，他們將被刪除repla cing innerHTML（因爲舊元素被破壞並被新元素替換）。

Answer 2

我建議修改您replace()：

window.onload = function() { 
 
    var str = document.getElementById("wrapper").innerHTML; 
 

 
    var patt = /(\d+)/g; 
 

 
    var res = str.replace(patt, "<span class='em'>$1</span>"); 
 

 
    document.getElementById("wrapper").innerHTML = res; 
 
};

span.em { 
 
    color: #f90; 
 
}

<div id="wrapper"><p>12345</p><p>12345</p></div>

的"<span class='em'>$1</span>"刀片（第一）匹配正則表達式的到替換串部分。

res = str.replace(patt, "<span class='em'>$1</span>"); 

參考文獻：

• String.prototype.replace()。