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

Question

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!

Does the asp:CheckBoxList encode the ListItem.Text property? If not, you could use: new ListItem("<span class=\"lbl\">" + item.Name.Replace(":", "</span>:<span>") + "</span>"), item.Id.ToString()) ...then just style the .lbl class. — fordareh
– fordareh, Commented Feb 24, 2016 at 22:29
Thank you, yes that works! I thought I had to use Regex in this situation, never thought of trying something like that. I'd still be interested in knowing if it's doable with Regex, otherwise I'm happy to have found a working solution one way or the other. — ingep
– ingep, Commented Feb 25, 2016 at 13:56

fordareh · Accepted Answer · 2016-02-25 13:58:30Z

2

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.

answered Feb 25, 2016 at 13:58

fordareh

2,9752 gold badges27 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chris Tomich · Accepted Answer · 2016-02-25 16:53:13Z

1

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

edited Feb 25, 2016 at 16:53

answered Feb 25, 2016 at 9:46

Chris Tomich

1331 silver badge7 bronze badges

6 Comments

ingep Over a year ago

It's a good idea thank you - the trouble is I don't have a nice <ul> to work with, the text I need to style belongs within the options of a large checkbox control, and the strings come from a database call (they're not hard coded like in your example). Is there a way to tweak your answer to work with this kind of control?

Chris Tomich Over a year ago

Share an example of the rendered asp:CheckBoxList HTML as I should be able to modify the selector to find these elements.

ingep Over a year ago

I edited the question to include the generated HTML. Never thought to check what gets generated to see if I could pick it out that way.

Chris Tomich Over a year ago

OK just updated it. Remember to up vote if it's helpful! :)

ingep Over a year ago

Yes this works too, thank you. It does seem like a lot more code/work compared to what @fordareh suggested, but on the other hand it does take the styling out of the business layer. Thank you to both of you.

|

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related