CODEWITHSUNDEEP
jqueryhtmlcss
uzay95
uzay95

Reputation: 16622

Finding and wrapping text with tag in another tag

There is a text for an exception result like that:

<span class='sException'>Exception throwed. Please check details:
Message:String was not recognized as a valid DateTime.
Stack: at System.DateTimeParse.ParseExact(String s, String format, DateTimeFormatInfo dtfi, DateTimeStyles style) at ... 
</span>

I want to wrap some texts(Message:, Stack: and texts between them) with css. So i want to have this as a result:

<span class='sException'>Exception throwed. Please check details:
<b>Message:</b><span class='sMessage'>String was not recognized as a valid DateTime.</span>
<b>Stack:</b><span class='stack'> at System.DateTimeParse.ParseExact(String s, String format, DateTimeFormatInfo dtfi, DateTimeStyles style) at ... </span>
</span>

Is there any way to do achive this with css ?

something like that:

.sException{ text-align:left; border:1px solid red; }
.sException[find text like 'Message:']{ display:block; font-weight:bold; text-indet:20px; }
.sException[find text after 'Message:']{ display:block; font-weight:normal; text-indet:30px; }
.sException[find text like 'Stack:']{ display:block; font-weight:bold; text-indet:20px; }
.sException[find text after 'Stack:']{ display:block; font-weight:normal; text-indet:30px; }

Upvotes: 2

Views: 158

Answers (2)

jAndy
jAndy

Reputation: 235962

That can't be done with css alone, you need some javascript too.

jQuery:

var $sException = $('.sException'),
    _str_msg    = $sException.text();
_str_msg = _str_msg.replace(/(Message:)/g, '<b>$1</b>');

$sException.html(_str_msg);

Now you can add a css class as well into the replacing string (<b class="anything">)

Upvotes: 1

Ben Rowe
Ben Rowe

Reputation: 28691

Css isn't going to generate tags. CSS is to style tags. You'll need to use jquery to parse the contents of .sException and format the data

$('.sException').each(function() {
  var content = $(this).text();
  if(content.indexOf('Message:') > -1) {
    // wrap in span tags
  }
  // etc
  $(this).html(content);
});

Upvotes: 1

Related Questions