javascript - 使用 Javascript 在逗号之间插入 CSS

Question

我正在插入一个 <span class="subtitle">在使用 JavaScript 和应用几行 CSS 的逗号之后，Company A, South Region 显示为:

公司 A，
华南地区

B 公司，东部地区，XYZ 如下:

公司 B，
东部地区，XYZ

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

期望的结果是同时使用 <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>