如何修复我的代码，使 <strike> 不会使我的 Javascript 代码失效？

Question

我正在使用以下代码创建分数：

<script type='text/javascript'>
$(document).ready(function () {
$('.fraction').each(function(key, value) {
    $this = $(this)
    var split = $this.html().split("/")
    if( split.length == 2 ){
       $this.html('<span class="top">'+split[0]+'</span><span class="bottom">'+split[1]+'</span>')
}    
});
});
</script>

如果我的正文中有以下代码，它会成功格式化为分数：

<span class="fraction">4/1</span>

但是，如果我包含一个标签，如下图所示，该功能将不再有效

<span class="fraction"><strike>4</strike>/1</span>

我该如何解决这个问题？谢谢！

Answer 1

使用 .text() 去除 html 标签，只获取文本。

var split = $this.text().split("/")

JSFiddle

如果您想在结果中保留 html 标记，一个简单的解决方案是为分数使用不同的分隔符，例如双斜杠 //、反斜杠 \，或管道 |。 JSFiddle

使用 you could also use regex to verify that it only splits if the character isn't found inside <..>. JSFiddle

var split = $this.html().split(/\/(?=[^>]*(?:<|$))/)

Answer 2

如果你想正确地做到这一点（同时保留你的标记），它会变得有点复杂，因为你需要一个位于 [=13= 的直接子节点的文本节点中的斜杠] 元素; jQuery 不能很好地处理文本节点。所以：

$(function() {
  $('.fraction').each(function(_, e) {
    var offset = 0, html = '<span class="top">', found = false;
    $.each(e.childNodes, function(_, c) {
      if (c.nodeType == Node.TEXT_NODE) {
        if (m = c.textContent.match(/(.*)\/(.*)/)) {
          found = true;
          html += m[1] + '</span>/<span class="bottom">' + m[2];
        } else {
          html += c.textContent;
        }
      } else {
        html += c.outerHTML;
      };
    });
    if (found) {
      e.innerHTML = html + '</span>';
    }
  });
});

.top {
  color: red;
}
.bottom {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="fraction"><strike>1</strike>/2</span>
<span class="fraction">2/2</span>

如何修复我的代码，使 <strike> 不会使我的 Javascript 代码失效？

How can I fix my code so that <strike> does not invalidate my Javascript code?

javascript

strikethrough