JavaScript で読み込むCSV セル内で改行したい

解決したい事

制作しているウェブサイトで、CSVをJavaScriptで読み込み、表を載せています。
編集は、CSVをExcelで開いてしています。
表の一部の項目だけ、情報量が多くなるので、セル内で改行しようと思いました。ですが、Excel内で改行できたとしてもウェブサイトには反映されず、解決方法が分かりません。

例

列1	列2	列3
No.1	サツマイモ	300円　　15cm 4個入り

今はこのようになっていますが、
行いたい形は、例3のセル内を

300円
15cm
4個入り

の並びに改行したいです。

	<script>

		function getCSVFile() {
		 	var xhr = new XMLHttpRequest();
		 	xhr.onload = function() {
		    createArray(xhr.responseText);
		};

		  	xhr.open("get", "ここに表示させるCSV名", true);
		  	xhr.send(null);
		}
		getCSVFile();
		function createXMLHttpRequest() {
		 	var XMLhttpObject = null;
		 	XMLhttpObject = new XMLHttpRequest();
		 	return XMLhttpObject;
		}

		function createArray(csvData) {
		 	var tempArray = csvData.split("\r\n");
		 	var csvArray = new Array();
			var class_ = '';
			var ul_elem = '';
			var li_elem = '';

//行
		  for(var i = 0; i<tempArray.length;i++){
		    	csvArray[i] = tempArray[i].split(",");
		 	}
			ul_elem += '<ul id="filter-menu">';

//ループ
			for(var y=0; y<csvArray.length-1; y++){
				if(csvArray[y][1]=="New"){
					class_ = 'new';
				}
				//li要素
				li_elem = '<li class='+class_+'>';
			  li_elem += '<div class="date"><p>'+csvArray[y][0]+'</p></div>';


					if(csvArray[y][csvArray[y].length-1]!=""){
						li_elem += "<div><p><a href='CSV/"+csvArray[y][csvArray[y].length-1]+"' download='"+csvArray[y][csvArray[y].length-1]+"'>"+csvArray[y][2]+"</a></div></p>"
					}else{
						li_elem += '<div><p>'+csvArray[y][2]+'</p></div>';
					}
					ul_elem += li_elem;
					li_elem = '';


				console.log(csvArray[y][csvArray[y].length-1]);
				li_elem = "</li>";
				ul_elem += li_elem;
				li_elem = "";
			}


			ul_elem += "</ul>";
			$("#tab-content").append(ul_elem);
		}


		window.onload = function(){
		$('#filter-menu').children('li').hide().filter('.' + 'rikukyo').show();
		}


		$(function(){
			$(document).ready(function(){
				"use strict";
				$('.bxslider').bxSlider({
					auto: true,
					autoControls: true,
					adaptiveHeight: true
				});
			});
		});
   </script>

   <body> 
   <div class="inner">
	<div>
        <div id="new-topics">
	    <ul class="tab-menu flexbox">
			<li class="selected"><a href="javascript:void(0);" class="rikukyo">新着</a></li>
		</ul>
	    <div id="tab-content"></div>
	</div>
   </div> 
 </body>

行動規範の内容に同意します

回答2件

tableで処理していますか？
replaceで[\r\n]+を"<br>"に変換してください
（改行ではなくセルを分けるほうが現実的だと思いますが）

投稿2020/10/02 03:23

yambejp

総合スコア116835

__megumi

2020/10/14 05:45

ありがとうございましす m(__)m 返事が遅くなってしまいすみません。例の表の作り方が悪いのですが、本当は文章を載せています。そのときに、文字が羅列してしまい読みにくいと思い、改行の策を考えています。実際のプログラムを再投稿いたしました。もしよろしければ、見ていただきアドバイスを頂ければと思っております。