在Javascript中从字符串中提取值到数组答案

【问题标题】：Extract values from a string to an array in Javascript在Javascript中从字符串中提取值到数组
【发布时间】：2015-08-28 11:51:46
【问题描述】：

我有这个字符串，我想将 TEXT1、TEXT2 等...提取到数组 m 中。

我尝试了正则表达式，但它不起作用。

var regex = /item\b[^>]*>(.*?)<button/g; 

var string = '<li id="reminder-1440746981190" class="new-item">TEXT1
    <button class="icon-trash delete-button" contenteditable="false"></button>
    <button class="icon-pencil edit-button" contenteditable="false"></button>
</li>
<li id="reminder-1440746983703" class="new-item">TEXT2
    <button class="icon-trash delete-button" contenteditable="false"></button>
    <button class="icon-pencil edit-button" contenteditable="false"></button>
</li>';

var m;

while ((m = regex.exec(string)) !== null) {
    if (m.index === regex.lastIndex) {
        regex.lastIndex++;
    }
}

alert(m[0]);

有什么想法吗？

【问题讨论】：

我打算建议var splts = string.split(/<[^<]*>(?:\s*<[^<]*>)*/g); console.info(splts.filter(Boolean));，但我想基于 JQuery 的答案更酷:)

标签： javascript regex extraction

【解决方案1】：

你可以这样试试：

var str = $('li').contents().filter(function(){
    return this.nodeType === 3;
}).text();

console.log(str);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="reminder-1440746981190" class="new-item">TEXT1
    <button class="icon-trash delete-button" contenteditable="false"></button>
    <button class="icon-pencil edit-button" contenteditable="false"></button>
</li>
<li id="reminder-1440746983703" class="new-item">TEXT2
    <button class="icon-trash delete-button" contenteditable="false"></button>
    <button class="icon-pencil edit-button" contenteditable="false"></button>
</li>

【讨论】：

但是，此代码未将标签内容作为数组提供。请检查日志。
你是对的。它输出一个字符串。如何将此字符串转换为元素数组？

【解决方案2】：

这是一段基于@Rahul 回答的代码，它返回一个修剪后的文本节点数组：

var arr = [];
$('li').contents().filter(function(){
      if (this.nodeValue !== null && 
           this.nodeValue.trim().length > 0) {
        arr.push(this.nodeValue.trim());
     }
});
console.log(arr.filter(Boolean));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="reminder-1440746981190" class="new-item">TEXT1
    <button class="icon-trash delete-button" contenteditable="false"></button>
    <button class="icon-pencil edit-button" contenteditable="false"></button>
</li>
<li id="reminder-1440746983703" class="new-item">TEXT2
    <button class="icon-trash delete-button" contenteditable="false"></button>
    <button class="icon-pencil edit-button" contenteditable="false"></button>
</li>

结果：["TEXT1", "TEXT2"]

【讨论】：