Question

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

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://java.sun.com/xml/ns/javaee"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    version="2.5">
    <display-name>hg6web</display-name>
    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.jsf</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.xhtml</url-pattern>
    </servlet-mapping>

    <context-param>
        <description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description>
        <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
        <param-value>client</param-value>
    </context-param>
    <context-param>
        <param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name>
        <param-value>resources.application</param-value>
    </context-param>

    <listener>
        <listener-class>com.sun.faces.config.ConfigureListener</listener-class>
    </listener>

    <context-param>
        <param-name>javax.faces.PROJECT_STAGE</param-name>
        <param-value>Development</param-value>
    </context-param>

    <welcome-file-list>
        <welcome-file>index.xhtml</welcome-file>
    </welcome-file-list>

</web-app>

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

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

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

Answer 1

使用.text()删除html标记，然后获取文本。

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

JSFiddle

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

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

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

Answer 2

如果你想正确地做（在保留你的标记的同时），它会变得有点复杂，因为你需要一个文本节点中的斜杠，它是.fraction元素的直接子节点;并且jQuery没有很好地处理文本节点。所以：

＆＃13;

$(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>';
    }
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: