如何修复我的代码以使 <strike> 不会使我的 Javascript 代码无效？答案

【问题标题】：How can I fix my code so that <strike> does not invalidate my Javascript code?如何修复我的代码以使 <strike> 不会使我的 Javascript 代码无效？
【发布时间】：2016-04-28 01:14:47
【问题描述】：

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

<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>

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

【问题讨论】：

因为标签有一个“/”
具体来说，您的拆分调用将返回一个长度为 3 的数组，因此下面的 if 将评估为 false
$this.html() -> $this.text()?
<strike> 是 HTML5 不支持的元素，请使用 <del> 或 <s>...这些元素将在 4 之间放置一行。它看起来不像 4/1 .
@JDoeMath 我有一个问题。你为什么在javascript中这样做？基本上你可以在页面被提供之前控制它吗？还是您正在抓取您无法控制的其他页面？

标签： javascript strikethrough

【解决方案1】：

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

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

JSFiddle

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

使用this answer，您还可以使用正则表达式来验证它是否仅在<..> 中找不到字符时才拆分。 JSFiddle

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

【讨论】：

替代分隔符解决方案非常完美 - 谢谢！
如果您对服务器端的控制足以更改为备用分隔符，为什么不直接输出您真正想要的 HTML（无需在客户端进行 Javascript 后处理）？

【解决方案2】：

如果您想正确地执行此操作（同时保留您的标记），它会变得有点复杂，因为您需要一个位于作为 .fraction 元素的直接子节点的文本节点中的斜线；并且 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>

【讨论】：