วิธีอ่านทีละบรรทัดของแท็ก HTML ของพื้นที่ข้อความ

93

ฉันมีพื้นที่ข้อความที่แต่ละบรรทัดมีค่า Integer ดังนี้

      1234
      4321
     123445

ฉันต้องการตรวจสอบว่าผู้ใช้ใส่ค่าที่ถูกต้องจริง ๆ หรือไม่และไม่ใช่ค่าตลก ๆ เช่น

      1234,
      987l;

สำหรับสิ่งนั้นฉันต้องอ่านทีละบรรทัดของพื้นที่ข้อความและตรวจสอบความถูกต้องนั้น ฉันจะอ่านทีละบรรทัดของพื้นที่ข้อความโดยใช้จาวาสคริปต์ได้อย่างไร

— Saurabh Kumar
แหล่งที่มา

2

ฉันไม่แน่ใจ 100% (ด้วยเหตุนี้ความคิดเห็น) แต่อาจเกี่ยวข้องกับการแยกข้อความในทุกๆ "\ n"

— Pluckerpluck

1

อาจซ้ำกันของการแยกวิเคราะห์ textarea ในสตริงย่อยตามการแบ่งบรรทัดใน Javascript

— Michael Berkowski

182

ลองทำตามนี้

var lines = $('textarea').val().split('\n');
for(var i = 0;i < lines.length;i++){
    //code here using lines[i] which will give you each line
}

— ShankarSangoli
แหล่งที่มา

14

แทนที่จะใช้การ$('textarea').val()ใช้งานdocument.getElementById('textareaId').innerHTMLนั้น

— ShankarSangoli

3

ฉันจำได้ว่ามีอีกวิธีหนึ่งที่เราใช้ เราใช้ form.elementname หรืออะไรก็ได้ ฉันหมายถึงกลับมานานแล้ว 6-7 ปีที่แล้วเมื่อ DOM ค่อนข้างใหม่

— SoWhat

ใช่คุณสามารถเข้าถึงได้โดยใช้ document.formname.textareName.value

— ShankarSangoli

3

บรรทัดรับประกันว่าจะลงท้ายด้วย \ n ไม่ใช่ \ r \ n หรือไม่?

— Oztaco - คืนสถานะโมนิกาซี

สำหรับผู้ที่อยู่ที่นี่ในปี 2020 ฉันไม่สามารถพูดได้อย่างแน่นอนว่าพฤติกรรมของเบราว์เซอร์เป็นอย่างไรเมื่อมีการเพิ่มความคิดเห็นด้านบน แต่ปัจจุบัน Chrome ไม่รู้จัก document.getElementById ('textarea') innerHTML ไม่ได้โหลดเป็นข้อความตัวยึดแล้ว ในโหลดดั้งเดิมของ DOM คุณจะต้องใช้ document.getElementById ('textarea') เพื่อเข้าถึงข้อความใด ๆ ที่ผู้ใช้ป้อนหรือแก้ไข ในการโหลดหน้าข้อความตัวยึดจะถูกใส่เป็น HTML ภายในระหว่างแท็ก <textarea> </textarea> แต่จะไม่แก้ไขเมื่อผู้ใช้เพิ่มอินพุต

— Eric Barker

37

ใช้งานได้โดยไม่ต้องใช้ jQuery:

var textArea = document.getElementById("my-text-area");
var arrayOfLines = textArea.value.split("\n"); // arrayOfLines is array where every element is string of one line

— Paul Brewczynski
แหล่งที่มา

5

สิ่งนี้จะให้ค่าตัวเลขที่ถูกต้องทั้งหมดในlines. คุณสามารถเปลี่ยนลูปเพื่อตรวจสอบความถูกต้องตัดอักขระที่ไม่ถูกต้องออกเป็นต้นแล้วแต่ว่าคุณต้องการ

var lines = [];
$('#my_textarea_selector').val().split("\n").each(function ()
{
    if (parseInt($(this) != 'NaN')
        lines[] = parseInt($(this));
}

— โจ
แหล่งที่มา

4

ตามบันทึกทั่วไปคุณมักต้องการส่งอาร์กิวเมนต์ที่สองไปยัง parseInt เพื่อบังคับให้อ่านเป็นฐาน 10 / ทศนิยม ( parseInt(this, 10)) มิฉะนั้นศูนย์นำหน้าจะนำไปสู่การตีความเป็นฐาน 8 (ฐานแปด) ซึ่งอาจนำไปสู่พฤติกรรมที่ค่อนข้างแปลกได้ ...

— IMSoP

5

สองตัวเลือก: ไม่ต้องใช้ JQuery หรือเวอร์ชัน JQuery

ไม่มี JQuery (หรือสิ่งอื่นที่จำเป็น)

var textArea = document.getElementById('myTextAreaId');
var lines = textArea.value.split('\n');    // lines is an array of strings

// Loop through all lines
for (var j = 0; j < lines.length; j++) {
  console.log('Line ' + j + ' is ' + lines[j])
}

เวอร์ชัน jQuery

var lines = $('#myTextAreaId').val().split('\n');   // lines is an array of strings

// Loop through all lines
for (var j = 0; j < lines.length; j++) {
  console.log('Line ' + j + ' is ' + lines[j])
}

หมายเหตุด้านข้างหากคุณต้องการสำหรับแต่ละลูปตัวอย่างคือ

lines.forEach(function(line) {
  console.log('Line is ' + line)
})

— Whitneyland
แหล่งที่มา

4

regex อย่างง่ายควรมีประสิทธิภาพในการตรวจสอบ textarea ของคุณ:

/\s*\d+\s*\n/g.test(text) ? "OK" : "KO"

— sinsedrix
แหล่งที่มา