Best way to add line break for each specified character? (asp.net)

Question

I'm having trouble getting line breaks to occur on a specific character on my asp.net site. I have a gridview with user accounts that has an 'Entitlements' column/field, in which data is entered with pipes, such as the following:

'Admin|Trader|Support|Sales'

I know this is not the best data architecture, but it has to stay like this for the time being until we add an entitlements table in the database.

Now, what I want to display in the actual gridview is this:

Admin
Trader
Support
Sales

In other words I want to replace each pipe with a line break, or at least add a line break at each pipe, so that each entitlement is on a separate line.

Is there a way to do this in my CSS class? I looked through different attributes such as white-space, text-overflow, and word-wrap, but so far I haven't found anything that will say "wrap text on any occurence of this character". I suppose I can use jQuery to do this, but it seems like there should be a simpler solution.

If jQuery is the way to go, then an example would be appreciated, as I'm new to jQuery.

Thanks for any help!

Answer 1

One possible solution:

var orig = $('#menu').html();
$('#menu').html(orig.replace(/\|/g,'<br />'));​

DEMO

Answer 2

You can do it any number of ways.

In the database:

SELECT REPLACE(entitlements, '|', '<br/>')

In jQuery:

$('.entitlements').each(function(){
    var $obj = $(this);
    var txt = $obj.text();
    $obj.html(txt.replace(/|/g, '<br/>'))
});

In asp.net:

<%# FormatEntitlements(Eval("Entitlements"))%>

public static string FormatEntitlements(string entitlements)
{
    return (entitlements ?? "").Replace("|", "<br/>");
}