Question

这可能很容易解决，但由于某些原因，我的大脑已经死了，我无法找到正确的成功之路:(

我有一些文字区域，通过在每行中输入每个单词或更多单词，我得到一个列表项。

$(document).on('click','#addList', function(){
            var lines = $('#list').val().split(/\n/);
            var texts = []
            for (var i=0; i < lines.length; i++) {
              if (/\S/.test(lines[i])) {
                texts.push($.trim(lines[i]));
              }
            }
            var list = JSON.stringify(texts);
            for(var e=0; e<list.length; e++){
                var li = li+'<li class="c1_2v">'+list[e]+'</li>'; 
            }
            $('.content').append($('<ul>'+li+'</ul>'));
});

通过这样做$ .trim如果我在一行中有更多的单词，我会遇到问题，但如果我在第一个单词之前有更多空的新行或空格，那么它会很有用。

示例：

<textarea>
    this    is 

a

something
that
I want to add to new lists
</textarea>

通过我的代码和第一个for循环，我得到类似：['this','is','a','something','that','I','want','to','add','to','new','lists']

通过第二个for循环，我进入li tags every letter or character from [ to ]标记内的li

我不懂正则表达式我看到很多网站，但它没有进入我的脑海，所以即使你把它添加为更简单的答案而没有解释什么用于我不知道它是如何工作的。

这基本上是我需要进入的内容.content div：

<ul>
  <li class="c1_2v">this is</li>
  <li class="c1_2v">a</li>
  <li class="c1_2v">something</li>
  <li class="c1_2v">that</li>
  <li class="c1_2v">I want to add to new lists</li>
</ul>

到目前为止，我将添加片段如何工作：

 $(document).on('click','#addList', function(){
        		var lines = $('#list').val().split(/\n/);
        		var texts = []
        		for (var i=0; i < lines.length; i++) {
        		  if (/\S/.test(lines[i])) {
        		    texts.push($.trim(lines[i]));
        		  }
        		}
        		var list = JSON.stringify(texts);
        		for(var e=0; e<list.length; e++){
        			var li = li+'<li class="c1_2v">'+list[e]+'</li>'; 
        		}
        		$('.content').append($('<ul>'+li+'</ul>'));
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="list"></textarea>
<button id="addList">Add</button>
<div class="content"></div>

还有一些未定义的Idk是什么：（

正如@AlexKudryashev所评论的那样，我使用数组作为字符串而非数组，如果我在for循环之前添加var li，则undefined将会消失。

Answer 1

$(document).on('click', '#addList', function() {
  var lines = $('#list').val().split(/\n/);
  var texts = []
  for (var i = 0; i < lines.length; i++) {
    if (/\S/.test(lines[i])) {
      texts.push($.trim(lines[i]));
    }
  }
  //var list = JSON.stringify(texts);
  var list = texts;
  var li = "";

  for (var e = 0; e < list.length; e++) {
    li = li + '<li class="c1_2v">' + list[e] + '</li>';
  }

  $('.content').append($('<ul>' + li + '</ul>'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="list"></textarea>
<button id="addList">Add</button>
<div class="content"></div>

JSON.stringify将值转换为JSON字符串。所以你循环每个字符串而不是数组。此外，由于未定义undefined，因此您获得了li。为了避免简单地将li定义为""空字符串。

Answer 2

这是一个不需要正则表达式的简化解决方案。您可以使用array.filter和array.map进行合并。

document.querySelector('button').onclick = () => {
  var text = document.querySelector('textarea').value;
  var lines = text.split('\n');
  var html = lines
    .filter(line => line.trim() !== '')
    .map(line => `<li class="c1_2v">${line}</li>`)
    .join('');
  document.querySelector('ul').innerHTML = html;
}

<textarea>
    this    is 

a

something
that
I want to add to new lists
</textarea>

<button>Click me</button>

<ul><!--output goes here--></ul>

通过新行从textarea值制作列表

2 个答案: