Question

我正在使用JavaScript在逗号后插入<span class="subtitle">，并应用几行CSS，以便 公司A，南部地区 的读法是：

公司A
南部地区

XYZ东部地区的公司B 读为：

B公司
XYZ东区

我遇到的问题是某些公司名称的第二个逗号分隔。我必须对公司A使用<h1 class="heading">，对公司B使用<h1 class="heading2">。

理想的结果是同时使用<h1 class="heading">并以某种方式考虑每个公司名称中使用多个逗号的可能性。

$('.heading').html(function(i, html){
    var html = html.split(',');
    return html[0] + ',' + '<span class="subtitle">' + html[1] + '</span>'
});

$('.heading2').html(function(i, html){
    var html = html.split(',');
    return html[0] + ',' + '<span class="subtitle">' + html[1] + ',' + html[2] + '</span>'
});

.subtitle {
    color: darkblue;
    display: table;
    font-size: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="heading">Company A, South Region</h1>
<h1 class="heading2">Company B, East Region, XYZ</h1>

Answer 1

您可以使用indexOf查找逗号的第一个出现位置，然后使用字符串上的slice从逗号的开始到第一次出现的位置分开，然后与第一个逗号分开直到字符串的结尾，这样像这样：

$('.heading').html(function(i, html){
    var i = html.indexOf(',');
    var splits = [html.slice(0,i), html.slice(i+1)];
    return splits[0] + ',' + '<span class="subtitle">' + splits[1] + '</span>'
});

.subtitle {
    color: darkblue;
    display: table;
    font-size: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="heading">Company A, South Region</h1>
<h1 class="heading">Company B, East Region, XYZ</h1>

Answer 2

尝试一下

$("h1").removeClass("heading heading1").each(function() {
   var headingHtml = $(this).html().split(',');
   $(this).html("<span class='heading'>" + headingHtml[0] + "</span>");
   headingHtml.shift();
   $(this).append("<span class='subtitle'>" + headingHtml.join() + "</span>");

});

.subtitle {
    color: darkblue;
	  display: table;
	  font-size: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="heading">Company A, South Region</h1>
<h1 class="heading2">Company B, East Region, XYZ, ABC</h1>

使用JavaScript在逗号之间插入CSS

2 个答案: