javascript - 如何从元素子元素中获取文本？

Question

我有一个带有一些 span 子元素的 div 元素。我想获取所有跨度之间有空格的文本，并将该文本与字符串进行比较。我的代码在这里:

var text = "this is some text in div";
var div = document.getElementById("div");
var btn = document.getElementById("btn");
btn.addEventListener("click", function() {
  var divtext = "";
  for (i = 0; i < div.children.length; i++) {
    divtext += div.children[i].innerHTML + " ";
  }
  console.log(divtext.localeCompare(text))
})

<div id="div"><span>this</span><span>is</span><span>some</span><span>text</span><span>in</span><span>div</span></div>
<button id="btn">click</button>

当我对字符串和 div 内部文本使用 localeCompare 时，结果应该为 0，但事实并非如此。问题出在哪里？

Answer 1

您的比较不相等 ( 0 )，因为 divtext 末尾有一个尾随空格.

如果您分配每个 <span> 中的文本对于数组，您可以使用 Array.prototype.join方法将值与 ' ' 连接起来分隔符，从而消除尾随空格。

var text = "this is some text in div";
var div = document.getElementById("div");
var btn = document.getElementById("btn");
btn.addEventListener("click", function() {
  var divtext = [];
  for (i = 0; i < div.children.length; i++) {
    divtext.push(div.children[i].innerHTML);
  }
  console.log(text.localeCompare(divtext.join(' ')));
})

<div id="div"><span>this</span><span>is</span><span>some</span><span>text</span><span>in</span><span>div</span></div>
<button id="btn">click</button>