javascript - 在某些文本周围环绕 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 元素中使用 text 而不是 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/