使用 css 类和正则表达式将样式动态应用于文本的各个部分

Apply style to parts of text dynamically using css class and regex

本文关键字：文本 应用于 个部 动态 样式 css 正则表达式 使用      更新时间：2023-09-26

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

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

区域供应计划：确定满足未来供应需求所需资源的共识。
替代供应商：增加替代供应来源的开发。等。。。

我希望它看起来像这样，第一个单词以粗体显示，直到冒号......
区域供应计划：确定满足未来供应需求所需资源的共识。
替代供应商：增加替代供应来源的开发。等。。。

我

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

这是 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 填充列表项，例如"项。名称"是保存我试图操作的文本的部分：

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

任何建议将不胜感激。谢谢！

您可以使用： 

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 类的样式。

就我个人而言，我不会尝试通过CSS来做到这一点，我会使用JavaScript来做到这一点。下面是如何在 JavaScript 中执行此操作的示例。

示例 HTML：

<html>
<head>
</head>
<body>
    <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>
    </tbody>
    </table>
    <script src="makeMyTextBold.js"></script>
</body>
</html>

makeMyTextBold.js：

var myListItems = document.querySelectorAll("span.checkBoxNoWrap label");
var regExToFindTextToMakeBold = /.+?:/;
for (var myListIndex = 0; myListIndex < myListItems.length; myListIndex++) {
    var myListItem = myListItems[myListIndex];
    var match = regExToFindTextToMakeBold.exec(myListItem.innerHTML);
    if (match) {
        var lengthOfTextToBold = match[0].length;
        var nonBoldText = myListItem.innerHTML.slice(lengthOfTextToBold);
        myListItem.innerHTML = "<span style='font-weight: bold'>" + match[0] + "</span>" + nonBoldText;
    }
}
相关文章：