javascript - 在将span元素环绕某些文本时遇到麻烦。 ('='和'/')

我正在尝试在每个数学符号周围包裹一个<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!

最佳答案

在text元素中使用label而不是td。这是一种使它更干燥的方法：

$('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/