Regex for new line not working in textarea jQuery

May 17, 2023

I am trying to convert returned output copied from router that consist of multiple \r\n to new line to be as pretty result configuration with indention for user viewing from UI. However my script below is not working. I have refer some reference from googling also not help much. Anyone have solution? Currently I am develop using MacOS platform and latest Chrome.

example output

{
  "status": "success",
  "output": {
    "ipv4_address": "xxx/xx",
  },
  "ne_response": "... \r\r\n--- {master}\r\nRouter@xyz> show ... inet address xxx/30\r\n\r\n{master}\r\nRouter@xyz> "
}

current output (\r\n not working)

html

<textarea class="form-control" id="viewConfig"></textarea>

jQuery (all not convert to new line)

 $("#viewConfig").on("keyup", function(){
    var vConfig = $("#viewConfig").val().replace(/\r\n|\r|\n/g, "\\n"); // double backslash not working
    var vConfig = $("#viewConfig").val().replace(/\r\n|\r|\n/g, "\n"); // single backslash not working
    $('#viewConfig').html(vConfig);
});

$("#viewConfig").on("keyup", function(){
    var vConfig = $('#viewConfig').val().replace(/\n/g, "\\n"); // double backslash not working
    var vConfig = $('#viewConfig').val().replace(/\n/g, "\n"); // single backslash not working
    $('#viewConfig').html(vConfig);
});

$("#viewConfig").on("keyup", function(){
    var vConfig = $("#viewConfig").val().replace(/[\r\n]+/gm, "&#13;&#10;");
    $('#viewConfig').html(vConfig);
});

>Solution :

IIUC, what you actually want to do is replace multiple occurrences of \r or \n with a single \n. You can do that with the regex [\r\n]+, which will match one or more \r or \n characters. You can then replace that with a single newline "\n". Note that you need to replace the val, not the html when referring to a textarea.

Type a character in the textbox below to see the effect:

$("#viewConfig").val("... \r\r\n--- {master}\r\nRouter@xyz> show ... inet address xxx/30\r\n\r\n{master}\r\nRouter@xyz> ")

$("#viewConfig").on("keyup", function(){
    var vConfig = $(this).val().replace(/[\r\n]+/g, "\n");
    $(this).val(vConfig);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class="form-control" id="viewConfig" rows="10" cols="30"></textarea>

Note you can simply use $(this) to refer to $("#viewConfig") in the event handler (see the manual).