javascript - 如何拆分从 `div` 元素检索到的文本

Question

我有这个 HTML:

<div class="chip">java<span class="material-icons close">×</span></div>
<div class="chip">spring<span class="material-icons close">×</span></div>
<div class="chip">python<span class="material-icons close">×</span></div>

通过以下脚本，我尝试检索不带 x 的文本。我使用类名获取 div 元素的值，但是当传递它来分割它时，相同的字符串返回而不进行任何分割:

var skills = $('.chip').text();
var arr = skills.split('x');
for(var i=0;i<arr.length;i++){
    alert(arr[i]);
}

例如:

var skills = 'javaxspringxpython';

输出保持不变。我知道这是因为 .text() 方法，但不知道如何解决这个问题。我尝试使用 .val()，但这不起作用。

我该如何解决这个问题？

Answer 1

您的 HTML 已经包含三个独立的元素。

您可以获取标签的各个内容，并从该内容中剔除任何其他标签(在您的情况下为 span 元素)，而不是拆分组合文本。然后您将拥有三个匹配的文本节点，然后需要将其映射到数组项:

var skills = $('.chip').contents().filter(function() {
    return this.nodeType === 3; // only immediate text in div, not in span
}).map(function() {
    return $(this).text();
}).get();

console.log(skills);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="chip">java<span class="material-icons close">×</span></div>
<div class="chip">spring<span class="material-icons close">×</span></div>
<div class="chip">python<span class="material-icons close">×</span></div>