Textarea line break after ';" character - textarea

Question

I have a textarea with dynamically added css code.
I want the css to look clean and want to know if its possible to split the lines after every ";" character.
I currently have it like this
--------------------|
display: inline;color:
red; |
|
|
|
|
--------------------
And want it to be like this automatically
--------------------|
display: inline; |
color: red; |
|
|
|
|
--------------------
Is there a way I can do this with jQuery or Javascript?

Answer 1

// Using jQuery
var val = $('textarea').val();
$('textarea').val(val.replace(/;/g, ';\n'));
// Using plain javascript
var textarea = document.getElementsByTagName('textarea')[0];
textarea.value = textarea.value.replace(/;/g, ';\n');

Answer 2

If you have access to jQuery this should work;
So lets say you have a textarea:
<textarea id="myTextarea"></textarea>
You can wire up an onchange event handler to adjust the content.
$(document).ready(function(){
$('#myTextarea').change(function(){
var oldVal = this.value;
var contentSplitBySemiColons = oldVal.split(';');
var thisFragment;
for(var i=1;i<contentSplitBySemiColons.length;i++){
thisFragment = contentSplitBySemiColons[i];
if(thisFragment[0] != '\n'){
contentSplitBySemiColons[i] = '\n' + thisFragment;
}
}
this.value = contentSplitBySemiColons.join(';');
});
});
Here's a JSFiddle of it in action if you want to try it out. http://jsfiddle.net/jeLscdm5/4/