我怎样才能修复我的代码，以便<罢工>不会使我的 Javascript 代码无效

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

本文关键字：我的 代码 罢工 无效 Javascript 以便      更新时间：2023-09-26

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

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

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

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

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

JSFiddle

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

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

var split = $this.html().split(/'/(?=[^>]*(?:<|$))/)
如果你想

正确地做到这一点（同时保留你的标记），它会变得有点复杂，因为你需要一个斜杠，该斜杠位于文本节点中，该斜杠是.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>

相关文章：