無法在某些文本週圍纏繞span元素。 （'='和'/'）

Question

我試圖圍繞每個數學符號包圍<span class="some_class"></span>。

我找到了爲這些符號*，+，-工作，但我不能讓它爲這些=工作，/

我一直在使用var x = $(this).text()而不是嘗試過，但去除的<label>標籤。

所以這個代碼工作正常：

$('table tr td:first-child').each(function() { 

    var x = $(this).html(); 

    var y = x.replace('*', '<span class="multiply">*</span>', 'gi').replace('+', '<span class="addition">+</span>', 'gi').replace('-', '<span class="subtraction">-</span>', 'gi'); 

    $(this).html(y); 

}); 

但是當我嘗試添加該上

.replace('=', '<span class="equals">=</span>', 'gi').replace('/', '<span class="division">/</span>', 'gi') 

這是行不通的。我認爲這是因爲在HTML中有=和/的標誌，它正在取代太多，並搞亂了一切。

FIDDLE FOR YOU! FIDDLE FOR YOU!

Answer 1

在label元素，而不是td使用text。這裏有一個辦法做到這一點更加乾燥：

$('table tr td:first-child label').each(function() { 

    var x = $(this).text(); 

    var symbols = { 
    '*':'multiplication', 
    '/':'division', 
    '+':'addition', 
    '-':'subtraction', 
    '=':'equals' 
    }; 

    var y = x.replace(/[*\/+=-]/g, function(m) { 
    return '<span class="'+ symbols[m] +'">'+ m +'</span>'; 
    }); 

    $(this).html(y); 
}); 

演示：http://jsfiddle.net/jpXCD/5/