Javascript วิธีแยกขึ้นบรรทัดใหม่

ฉันใช้ jquery และฉันมี textarea เมื่อฉันส่งโดยปุ่มของฉันฉันจะแจ้งเตือนแต่ละข้อความโดยคั่นด้วยขึ้นบรรทัดใหม่ จะแยกข้อความของฉันอย่างไรเมื่อมีการขึ้นบรรทัดใหม่

  var ks = $('#keywords').val().split("\n");
  (function($){
     $(document).ready(function(){
        $('#data').submit(function(e){
           e.preventDefault();
           alert(ks[0]);
           $.each(ks, function(k){
              alert(k);
           });
        });
     });
  })(jQuery);

อินพุตตัวอย่าง:

Hello
There

ผลลัพธ์ที่ฉันต้องการคือ:

alert(Hello); and
alert(There)

ลองเริ่มต้นksตัวแปรภายในฟังก์ชันส่งของคุณ

  (function($){
     $(document).ready(function(){
        $('#data').submit(function(e){
           var ks = $('#keywords').val().split("\n");
           e.preventDefault();
           alert(ks[0]);
           $.each(ks, function(k){
              alert(k);
           });
        });
     });
  })(jQuery);

คุณควรแยกวิเคราะห์บรรทัดใหม่โดยไม่คำนึงถึงแพลตฟอร์ม (ระบบปฏิบัติการ) การ แยกนี้เป็นสากลที่มีนิพจน์ทั่วไป คุณอาจพิจารณาใช้สิ่งนี้:

var ks = $('#keywords').val().split(/\r?\n/);

เช่น

"a\nb\r\nc\r\nlala".split(/\r?\n/) // ["a", "b", "c", "lala"]

มันควรจะเป็น

yadayada.val.split(/\n/)

คุณกำลังส่งสตริงตัวอักษรไปยังคำสั่ง split ไม่ใช่ regex

เนื่องจากคุณใช้textareaงานคุณอาจพบ \ n หรือ \ r (หรือ \ r \ n) สำหรับตัวแบ่งบรรทัด ดังนั้นจึงแนะนำสิ่งต่อไปนี้:

$('#keywords').val().split(/\r|\n/)

ref: ตรวจสอบว่าสตริงมีตัวแบ่งบรรทัดหรือไม่

แค่

var ks = $('#keywords').val().split(/\r\n|\n|\r/);

จะทำงานได้อย่างสมบูรณ์

ตรวจสอบให้แน่ใจว่า\r\nได้วางไว้ที่ส่วนหน้าของสตริงRegExpเนื่องจากจะต้องลองก่อน

วิธีที่ง่ายที่สุดและปลอดภัยที่สุดในการแยกสตริงโดยใช้บรรทัดใหม่โดยไม่คำนึงถึงรูปแบบ (CRLF, LFCR หรือ LF) คือการเอาตัวละครที่กลับรถและจากนั้นก็แยกบนตัวอักษรบรรทัดใหม่"text".replace(/\r/g, "").split(/\n/);

เพื่อให้แน่ใจว่าเมื่อคุณมีสายใหม่อย่างต่อเนื่อง (เช่น\r\n\r\n, \n\r\n\rหรือ\n\n) ผลที่ได้จะเป็นแบบเดียวกัน

ในกรณีของคุณรหัสจะมีลักษณะดังนี้:

(function ($) {
    $(document).ready(function () {
        $('#data').submit(function (e) {
            var ks = $('#keywords').val().replace(/\r/g, "").split(/\n/);
            e.preventDefault();
            alert(ks[0]);
            $.each(ks, function (k) {
                alert(k);
            });
        });
    });
})(jQuery);

นี่คือตัวอย่างบางส่วนที่แสดงความสำคัญของวิธีนี้:

var examples = ["Foo\r\nBar", "Foo\r\n\r\nBar", "Foo\n\r\n\rBar", "Foo\nBar\nFooBar"];

examples.forEach(function(example) {
  output(`Example "${example}":`);
  output(`Split using "\n": "${example.split("\n")}"`);
  output(`Split using /\r?\n/: "${example.split(/\r?\n/)}"`);
  output(`Split using /\r\n|\n|\r/: "${example.split(/\r\n|\n|\r/)}"`);
  output(`Current method: ${example.replace(/\r/g, "").split("\n")}`);
  output("________");
});

function output(txt) {
  console.log(txt.replace(/\n/g, "\\n").replace(/\r/g, "\\r"));
}

1. ย้ายvar ks = $('#keywords').val().split("\n");ภายในตัวจัดการเหตุการณ์
2. ใช้alert(ks[k])แทนalert(k)

  (function($){
     $(document).ready(function(){
        $('#data').submit(function(e){
           e.preventDefault();
           var ks = $('#keywords').val().split("\n");
           alert(ks[0]);
           $.each(ks, function(k){
              alert(ks[k]);
           });
        });
     });
  })(jQuery);

การสาธิต

จาวาสคริปต์ Good'ol:

 var m = "Hello World";  
 var k = m.split(' ');  // I have used space, you can use any thing.
 for(i=0;i<k.length;i++)  
    alert(k[i]);  

ปัญหาคือว่าเมื่อคุณเริ่มต้นksที่valueยังไม่ได้รับการตั้งค่า

คุณต้องดึงค่าเมื่อผู้ใช้ส่งแบบฟอร์ม ดังนั้นคุณต้องเริ่มต้นksภายในฟังก์ชันการโทรกลับ

(function($){
   $(document).ready(function(){
      $('#data').submit(function(e){
      //Here it will fetch the value of #keywords
         var ks = $('#keywords').val().split("\n");
         ...
      });
   });
})(jQuery);

นี่คือตัวอย่างที่มีแทนconsole.log alert()จะสะดวกกว่า :)

var parse = function(){
  var str = $('textarea').val();
  var results = str.split("\n");
  $.each(results, function(index, element){
    console.log(element);
  });
};

$(function(){
  $('button').on('click', parse);
});

คุณสามารถลองได้ที่นี่

คุณไม่จำเป็นต้องส่งนิพจน์ทั่วไปที่นั่น แค่นี้ก็ใช้ได้ ..

 (function($) {
      $(document).ready(function() {
        $('#data').click(function(e) {
          e.preventDefault();
          $.each($("#keywords").val().split("\n"), function(e, element) {
            alert(element);
          });
        });
      });
    })(jQuery);