I am dumping some CSS into a div and I am looking to format it so it is more legible. Basically what I want to do is insert a break tag after every semicolon. I have searched around for a while but can't seem to find something that quite fits what I am trying to do.

I have something like this...

HTML

<div class='test'>
color:red;background-color:black;
</div>​

jQuery

var test = $('.test').text();
var result = test.match(/;/g);   

alert(result);​

And I have tried..

var test = $('.test').text();
var result = test.match(/;/g);   

result.each(function(){
$('<br/>').insertAfter(';');
});    

alert(result);​

Also I have started a fiddle here.. Which basically just returns the matched character... / That is the only part I have been able to get to work so far.

I feel like I am sort of heading down the right path with this but I know it isn't right because it errors out. I am thinking there is a way to insert a break tag after each matched element, but I am not really sure how to get there. Any help is much appreciated. Thanks...

I am dumping some CSS into a div and I am looking to format it so it is more legible. Basically what I want to do is insert a break tag after every semicolon. I have searched around for a while but can't seem to find something that quite fits what I am trying to do.

I have something like this...

HTML

<div class='test'>
color:red;background-color:black;
</div>​

jQuery

var test = $('.test').text();
var result = test.match(/;/g);   

alert(result);​

And I have tried..

var test = $('.test').text();
var result = test.match(/;/g);   

result.each(function(){
$('<br/>').insertAfter(';');
});    

alert(result);​

Also I have started a fiddle here.. Which basically just returns the matched character... http://jsfiddle.net/krishollenbeck/zW3mj/9/ That is the only part I have been able to get to work so far.

I feel like I am sort of heading down the right path with this but I know it isn't right because it errors out. I am thinking there is a way to insert a break tag after each matched element, but I am not really sure how to get there. Any help is much appreciated. Thanks...

• javascript
• jquery

• 1 Wouldn't the pre tag render the break tags as viewable code versus actually creating breaks like I want? – khollenbeck Commented Sep 5, 2012 at 16:48
• 1 Thanks everybody for the very fast responses... – khollenbeck Commented Sep 5, 2012 at 16:49
• I was suggesting ommitting break tags altogether, and just pasting the css within the <pre> tags as you want it to be formatted. jsfiddle.net/NgHCE – Zach Lysobey Commented Sep 5, 2012 at 16:50
• I have tried that... the problem is that is still doesn't format properly because the text is being dumped in via jQuery. So I think I would have to have it formatted before I dump it into the div. Otherwise as I understand it... The pre tag will render the code exactly how it is placed on the page. – khollenbeck Commented Sep 5, 2012 at 16:55

5 Answers 5

try it like this

var test = $('.test').text();
var result = test.replace(/\;/g,';<br/>');   

$('.test').html(result);​

http://jsfiddle.net/Sg5BB/

You can use a normal javascript .replace() method this way:

​$(document)​.ready(function(){
    $(".test").html($(".test").html().replace(/;/g, ";<br />"));
});​

Fiddle: http://jsfiddle.net/SPBTp/4/

Use This CODE

var test = $('.test').text();
var result = test.split(';').join(';<br />')   

http://jsfiddle.net/FmBpF/

You can't use jQuery selectors on text, it only works on elements.

Get the text, just replace each ; with ;<br/>, and put it back.

$('.test').html($('.test').text().replace(/;/g, ';<br/>'));

Try something like this :

var test = $('.test').text(); var result = test.replace(/;/g,";
");
$('.test').html(result); ​ That should work if you stick it into your jfiddle.