用li包裹每行

Question

This is how I split the content of a textarea element into br-lines for displaying:

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

So this string...

Line 1\nLine 2

...gets...

Line 1<br>
Line 2<br>

But now I need each line wrapped as a li -element. The result should be:

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

This is how I would do that:

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

But is this the correct way to do that?

Answer 1

You can replace any sequence of non-linebreaks with <li>...</li> . Note that this also ignores empty lines:

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

Answer 2

You can use Array#map and Array#join method to make it one linear

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

Or something tricky with Array#join method

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

Answer 3

Here you go, you can use split to split your value into array then with reduce wrap each one of them into a span/li whatever you want.

 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>' }, '') } 

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

Or more shorter with fat arrow functions

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

You can try string.replace as well.

 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); 

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