Computer >> Máy Tính >  >> Lập trình >> Javascript

Làm cách nào để chuyển văn bản được phân tách bằng dấu phẩy trong div thành các dòng riêng biệt bằng JavaScript?

Giả sử sau đây là văn bản được phân tách bằng dấu phẩy của chúng tôi trong div -

<div class="commaSeparated">
This,is,the,first,JavaScript,program
</div>

Để chuyển văn bản được phân tách bằng dấu phẩy thành các dòng riêng biệt, bạn cần sử dụng trim () cùng với split () trên cơ sở dấu phẩy (,).

Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="commaSeparated">
This,is,the,first,JavaScript,program
</div>
</form>
<script>
   var allTheData = document.querySelector('.commaSeparated').textContent.trim().split(',')
   var separateList = '<ul>'
   allTheData.forEach(function(value) {
      separateList += '<li>' + value + '</li>';
   });
   separateList += '</ul>';
   document.querySelector(".commaSeparated").innerHTML = separateList;
</script>
</body>
</html>

Để chạy chương trình trên, hãy lưu tên tệp “anyName.html (index.html)” và nhấp chuột phải vào tệp. Chọn tùy chọn “Mở bằng Máy chủ Trực tiếp” trong trình chỉnh sửa Mã VS.

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Làm cách nào để chuyển văn bản được phân tách bằng dấu phẩy trong div thành các dòng riêng biệt bằng JavaScript?