JQuery how to insert tag <br/"> after each semicolon

Question

I drop the CSS in the div and I am looking for it to format so that it is more legible. Basically what I want to do is insert a break tag after each semicolon. I searched around for a while, but I can’t find something that is consistent with what I'm 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 tried ..

 var test = $('.test').text(); var result = test.match(/;/g); result.each(function(){ $('<br/>').insertAfter(';'); }); alert(result);​ 

I also started a fiddle here .. Which basically just returns a matching character ... http://jsfiddle.net/krishollenbeck/zW3mj/9/ This is the only part I've managed to get to so far.

I feel like I'm going on the right track with this, but I know this is wrong because he is wrong. I think there is a way to insert a break tag after each matched element, but I'm not quite sure how to get there. Any help is much appreciated. Thanks...

Answer 1

try it like

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

http://jsfiddle.net/Sg5BB/

Answer 2

You can use the regular javascript .replace() method as follows:

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

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

Answer 3

Use this code

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

http://jsfiddle.net/FmBpF/

Answer 4

You cannot use jQuery selector in text, it only works with elements.

Get the text, just replace each ; on ;<br/> and return it.

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

Answer 5

Try something like this:

var test = $ ('. test'). text (); var result = test.replace (/; / g, ";
");
$ ('Test') HTML (result). This should work if you paste it into your jfiddle.