Question

目前我有一堆文本存储在一个数组中。当我在控制台中输出它时，我看到保留了新的行。如果我将它输出到textarea它很好，我有新的行，但我不能用不同的颜色格式化文本（我需要选择基于关键字的颜色编码）

我想要做的是使用新行看文本区域，但将其输出为类似<div><p>array output here</p></div>的内容，但保留新行。无论我尝试什么，它都会打破它们，我会一起看到所有文本。

以下是我使用的代码：

//Works great but not format friendly as in colors
$('#textarea').val(myArray)

//format friendly colors but does not keep new lines
$('div[title^="divContainer"]').find('p').text(myArray);

任何有两全其美的建议？

由于

Answer 1

＆＃13;

var myArray = ["hello","world"] ;
for (var i; i<myArray.length; i++)
{
   var result = $('div[title^="divContainer"]').find('p').text(myArray[i] + '\n');
   result.html(result.html().replace(/\n/g,'<br/>'));
}

＆＃13;

Answer 2

在纯JavaScript中（我使用<br>表示换行符）：

＆＃13;

var myArray = ["Hello, my name is Test1.",
"Hello I'm Test2.",
"Hello, I'm Test3."];

for (var i = 0; i < myArray.length; i++) {
	document.getElementById("myDiv").innerHTML =
document.getElementById("myDiv").innerHTML + myArray[i] + "<br>";
}

＆＃13;

<div id="myDiv"></div>

＆＃13;

Answer 3

使用\n循环遍历数组和replace() <br>并使用html()方法

＆＃13;

var myArray = ["\nFirst test", "\n\nSec\nond test", "\nThird Test"],
  text = myArray.join(''),
  html = myArray.reduce((a, c) => a + c.replace(/\n/g, '<br>'),'');

$('#textarea').val(text);
$('div[title^="divContainer"] p').html(html);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div title="divContainer">
  <p>Test</p>
</div>
<textarea disabled rows="10" cols="15" id="textarea"></textarea>

＆＃13;

在div和textarea中保持数组中的新行

3 个答案: