新行的正则表达式在 textarea jQuery 中不起作用

Regex for new line not working in textarea jQuery

提问人:mastersuse 提问时间:5/17/2023 更新时间:5/17/2023 访问量:48

问:

我正在尝试将从路由器复制的返回输出转换为由多个行到新行的输出,以作为漂亮的结果配置,并带有缩进,供用户从 UI 查看。但是,我下面的脚本不起作用。我从谷歌搜索中参考了一些参考资料,也没有多大帮助。有人有解决方案吗?目前我正在使用 MacOS 平台和最新的 Chrome 进行开发。\r\n

示例输出

{
  "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> "
}

电流输出(不工作)\r\n

enter image description here

[HTML全文]

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

jQuery(全部不转换为换行符)

 $("#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);
});
JavaScript HTML jQuery 正则表达式 TextArea

评论


答:

1赞 Nick 5/17/2023 #1

IIUC,你真正想做的是用一个 .您可以使用正则表达式来执行此操作,它将匹配一个或多个字符。然后,您可以将其替换为单个换行符。请注意,在引用 textarea 时,您需要替换 ,而不是 。\r\n\n[\r\n]+\r\n"\n"valhtml

在下面的文本框中键入一个字符以查看效果:

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

请注意,您可以简单地用于在事件处理程序中引用(请参阅手册)。$(this)$("#viewConfig")

评论

0赞 mastersuse 5/17/2023
嗨,我有问题,我试图在文本区域中不使用预定义的值作为您上面的答案,我尝试在文本区域中粘贴路由器相同的配置。但是正则表达式不起作用。为什么?
0赞 Nick 5/17/2023
@mastersuse你确定它们是真正的换行符吗?如果将文本粘贴到代码段文本区域,它将按预期工作
0赞 mastersuse 5/17/2023
是的,在路由器中它是换行符。流程是这样的,API 会从路由器获取配置并变成 .然后,我将配置复制并粘贴到但不是功能中。结果就像我之前的帖子一样。长字符串。\r\n<textarea>\r\n
1赞 Nick 5/17/2023
@mastersuse,如果字符以 和 的身份进入文本区域(即反斜杠后跟 r 或 n),则需要修改正则表达式以匹配它,例如\r\n/(?:\\[rn])+/g