在某些文本周围包装span元素时遇到问题。 （'='和'/'）

Question

我正试图在每个数学符号周围包裹一个<span class="some_class"></span>。

我已经让它适用于这些符号*，+，-，但我无法让它适用于这些=，{{1 }}

我尝试使用/代替，但删除了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);

});

它不起作用。我认为这是因为html中有.replace('=', '<span class="equals">=</span>', 'gi').replace('/', '<span class="division">/</span>', 'gi') 和=个符号，它们正在替换它并且搞乱一切。

FIDDLE FOR YOU! FIDDLE FOR YOU!

Answer 1

使用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/