javascript - 使用 css 类和正则表达式动态地将样式应用于部分文本

Question

我正在尝试弄清楚如何将样式仅应用于我的 html 文本的特定部分，即应用粗体样式直到到达第一个“:”。我想我可以用一个 css 类和一些正则表达式来做到这一点，但我不知道怎么做。

基本上我有一个列表加载带有文本的复选框到我的页面上，如下所示......

区域供应规划:就满足 future 供应需求所需的资源达成共识。
替代 vendor :增加替代供应来源的开发。等等……

我希望它看起来像这样，第一个词是粗体，直到冒号......
区域供应规划:就满足 future 供应需求所需的资源达成共识。
替代 vendor :增加替代供应源的开发。等等……

我提供以下代码只是为了解释为什么我需要这样做，这是因为我从数据库中获取列表中的文本，并且没有任何其他方式来控制样式……

这是 html...

<div class="form-group">
  <div class="col-sm-12">   
    <label>Strategic Initiatives</label><br />
    <asp:CheckBoxList id="strategicInitiativeList" runat="server" ClientIDMode="Static" OnSelectedIndexChanged="strategicInitiativeList_SelectedIndexChanged" />
  </div>
</div>

PageLoad 像这样填充列表项，“item.Name”是包含我试图操作的文本的部分:

foreach (var item in strategicItems) {
  si = new ListItem(item.Name, item.Id.ToString());
  si.Attributes.Add("class", "checkBoxNoWrap");
  strategicInitiativeList.Items.Add(si);
}

它当前应用的类定义如下:

.checkBoxNoWrap label {
  display: inline;
  padding-left: 5px;
  font-weight: normal;
}

这是说完一切之后呈现的复选框的 HTML...

    <table id="strategicInitiativeList">
<tbody><tr>
    <td><span class="checkBoxNoWrap"><input id="strategicInitiativeList_0" type="checkbox" name="ctl00$MainContent$strategicInitiativeList$strategicInitiativeList_0" value="-1"><label for="strategicInitiativeList_0">None</label></span></td>
</tr><tr>
    <td><span class="checkBoxNoWrap"><input id="strategicInitiativeList_1" type="checkbox" name="ctl00$MainContent$strategicInitiativeList$strategicInitiativeList_1" value="1"><label for="strategicInitiativeList_1">Regional Supply Planning: Identify resources necessary to meet future supply needs.</label></span></td>
</tr><tr>
    <td><span class="checkBoxNoWrap"><input id="strategicInitiativeList_2" type="checkbox" name="ctl00$MainContent$strategicInitiativeList$strategicInitiativeList_2" checked="checked" value="2"><label for="strategicInitiativeList_2">Alternative Supplies: Increase development of alternative sources.</label></span></td>
</tr> etc...

如有任何建议，我们将不胜感激。谢谢!

Answer 1

你可以使用:

foreach (var item in strategicItems) {
  si = new ListItem(
    "<span class=\"lbl\">" + item.Name.Replace(":", "</span>:<span>") + "</span>", 
    item.Id.ToString()
  );
  si.Attributes.Add("class", "checkBoxNoWrap");
  strategicInitiativeList.Items.Add(si);
}

...然后只需为 .lbl 类设置样式。