使用 Javascript 在逗号之间插入 CSS

Question

>我使用 JavaScript 在逗号后插入一个<span class="subtitle">并应用几行 CSS，以便公司 A 南区读作：

A公司，
南区

和公司B，东部地区，XYZ读作：

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