Question

这就是我将textarea元素的内容分成br行以显示：

的方法

function linebreak(string) {
    return string.replace(/(?:\r\n|\r|\n)/g, '<br />');
}

所以这个字符串......

Line 1\nLine 2

... ...得到

Line 1<br>
Line 2<br>

但现在我需要将每一行包裹为li - 元素。结果应该是：

<li>Line 1</li>
<li>Line 2</li>

我就是这样做的：

let result = '';
string.split('\n').forEach(function(line) {
    result += '<li>' + line + '</li>';
});
return result;

但这是正确的方法吗？

Answer 1

您可以使用<li>...</li>替换任何非换行符序列。请注意，这也忽略了空行：

＆＃13;

var text = 'first line\nsecond line\r\n\r\nthrid\n\n\n'
html = text.replace(/[^\r\n]+/g, '<li>$&</li>');
console.log(html)

＆＃13;

Answer 2

您可以使用 Array#map 和 Array#join 方法将其设为一个线性

return string.split('\n').map(function(line) { return '<li>' + line + '</li>'; }).join('');

使用 Array#join 方法

可能会有些棘手

return '<li>' + string.split('\n').join('</li><li>') + '</li>';

Answer 3

在这里，您可以使用split将您的值拆分为数组，然后使用 reduce 将其中的每一个包装成span / li，无论您想要什么。< / p>

＆＃13;

function wrapValue() {
  var string = document.getElementById("textarea").value
    // append to ul 
  document.getElementById("myList").innerHTML = linebreak(string);
}
function linebreak(string){
  return string.split('\n')
  .reduce(function(c, n){
    return c + '<li>' + n + ' </li>'
  }, '')
}

＆＃13;

<textarea id="textarea" name="" id="" cols="30" rows="10"></textarea>
<button onclick="wrapValue()">Clic</button>
<ul id="myList">
</ul>

＆＃13;

使用胖箭头功能更短或更短

wrapValue = () => {
  var string = document.getElementById("textarea").value
    // append to ul 
  document.getElementById("myList").innerHTML = linebreak(string);
}
linebreak = (string) => string.split('\n')
  .reduce((c, n) => c + '<li>' + n + ' </li>', '');

Answer 4

您也可以尝试string.replace。

＆＃13;

function getLIs(str) {
  return "<li>" + str.replace(/\n/g, "</li><li>") + "</li>";
}

var str = "Line 1\nLine 2\nLine 3";
document.getElementById("content").innerHTML = getLIs(str);

＆＃13;

<ul id="content"></ul>

＆＃13;

用li包裹每一行

4 个答案: