在另一个标签中查找和包装带有标签的文本

时间:2010-07-28 06:19:25

标签: jquery html css

有一个类似的异常结果的文本:

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

我想用css包装一些文本(Message:,Stack:和它们之间的文本)。所以我希望得到这个结果:

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

有没有办法用css做到这一点?

类似的东西:

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

2 个答案:

答案 0 :(得分:1)

Css不会生成标签。 CSS是样式标签。您需要使用jquery来解析.sException的内容并格式化数据

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

答案 1 :(得分:1)

单靠css无法做到,你也需要一些javascript

jQuery的:

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

$sException.html(_str_msg);

现在您可以在替换字符串中添加css class<b class="anything">