Regex for new line not working in textarea jQuery

huangapple go评论76阅读模式
英文:

Regex for new line not working in textarea jQuery

问题

I am trying to convert returned output copied from router that consists of multiple \r\n to new lines to create a neatly formatted result configuration with indentation for user viewing from the UI. However, my script below is not working. I have referred to some references from Googling, but it hasn't been very helpful. Does anyone have a solution? Currently, I am developing using the MacOS platform and the 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):

Regex for new line not working in textarea jQuery

HTML:

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

jQuery (none of these convert to new lines):

$("#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);
});
英文:

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

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

current output (\r\n not working)

Regex for new line not working in textarea jQuery

html

&lt;textarea class=&quot;form-control&quot; id=&quot;viewConfig&quot;&gt;&lt;/textarea&gt;

jQuery (all not convert to new line)

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

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

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

答案1

得分: 1

IIUC,您实际要做的是将多次出现的\r\n替换为单个\n。您可以使用正则表达式[\r\n]+来匹配一个或多个\r\n字符。然后,您可以用单个换行符"\n"来替换它。请注意,当引用文本区域时,您需要替换的是val而不是html

在文本框中输入一个字符以查看效果:

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

$("#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>

请注意,您可以在事件处理程序中使用$(this)来引用$("#viewConfig")(参见手册)。

英文:

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 &quot;\n&quot;. 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:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(&quot;#viewConfig&quot;).val(&quot;... \r\r\n--- {master}\r\nRouter@xyz&gt; show ... inet address xxx/30\r\n\r\n{master}\r\nRouter@xyz&gt; &quot;)

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

<!-- language: lang-html -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;textarea class=&quot;form-control&quot; id=&quot;viewConfig&quot; rows=&quot;10&quot; cols=&quot;30&quot;&gt;&lt;/textarea&gt;

<!-- end snippet -->

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

huangapple
  • 本文由 发表于 2023年5月17日 12:12:38
  • 转载请务必保留本文链接:https://go.coder-hub.com/76268511.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定