CODEWITHSUNDEEP
javascriptcssregex
ingep
ingep

Reputation: 197

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

I’m trying to figure out how I can apply style to only specific parts of my html text, namely apply bold style until the first “:” is reached. I’m thinking I can do this with a css class and some regex but I don’t know how.

Basically I have a list loading checkboxes with text onto my page like the below…

Regional Supply Planning: Identify consensus on the resources necessary to meet future supply needs.
Alternative Suppliers: Increase development of alternative sources of supplies. Etc…

And I want it to look like this, with the first words in bold until the colon…
Regional Supply Planning: Identify consensus on the resources necessary to meet future supply needs.
Alternative Suppliers: Increase development of alternative sources of supplies. Etc…

I’m supplying the following code just to explain why I need to do it this way, it's because I’m getting the text from the database out of a list, and don't have any other way of controlling the styling…

This is the 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>

The PageLoad populates the list items like so, the "item.Name" is the part holding the text I am trying to manipulate:

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

The class that it’s currently applying is defined as such:

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

Here is the rendered HTML of the checkbox after all is said and done...

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

Any advice would be appreciated. Thanks!

Upvotes: 2

Views: 1237

Answers (2)

Chris Tomich
Chris Tomich

Reputation: 133

Personally I wouldn't be attempting to do this via CSS, I'd be using JavaScript to do it. Here is an example of how I'd do this in JavaScript.

Sample 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;
    }
}

Upvotes: 1

fordareh
fordareh

Reputation: 2973

You could use: 

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);
}

...then just style the .lbl class.

Upvotes: 2

Related Questions