5

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

Kris Hollenbeck
  • 15,389
  • 18
  • 62
  • 95
  • 1
    Wouldn't the pre tag render the break tags as viewable code versus actually creating breaks like I want? – Kris Hollenbeck Sep 05 '12 at 16:48
  • 1
    Thanks everybody for the very fast responses... – Kris Hollenbeck Sep 05 '12 at 16:49
  • I was suggesting ommitting break tags altogether, and just pasting the css within the `
    ` tags as you want it to be formatted. http://jsfiddle.net/NgHCE/
     – Zach Lysobey Sep 05 '12 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. – Kris Hollenbeck Sep 05 '12 at 16:55

5 Answers5

12

try it like this

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

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

http://jsfiddle.net/Sg5BB/

wirey00
  • 32,479
  • 7
  • 49
  • 64
3

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/

Praveen Kumar Purushothaman
  • 154,660
  • 22
  • 177
  • 226
  • No need of using regex for this small kind of application. `.replace()` method does the trick! :) – Praveen Kumar Purushothaman Sep 05 '12 at 16:46
  • If you have more than one ';' you will need to use something similar to wirey. if you just use simple `.replace()` it will only replace the first instance. http://jsfiddle.net/SPBTp/2/ – Matt Sep 05 '12 at 16:49
2

Use This CODE

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

http://jsfiddle.net/FmBpF/

Ashirvad
  • 2,344
  • 1
  • 12
  • 19
1

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/>'));
Guffa
  • 640,220
  • 96
  • 678
  • 956
0

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.

samisadaka
  • 91
  • 1
  • 6