Question

<p class="aaa"> aaa <span class="bbb"> bbb </span> </p>

我只想输入文字'aaa'

但是document.querySelector('p.aaa').innerText --> 'aaabbb'

我怎么只给'aaa'发短信？

Answer 1

使用childNodes和textContent并使用trim()仅获取p的文本。

运行下面的代码段。

let text = document.querySelector('.aaa').childNodes[0].textContent.trim()

console.log(text) ///aaa

<p class="aaa"> aaa <span class="bbb"> bbb </span> </p>

Answer 2

此功能将从所选元素中排除任何子HTML元素的内容。它还将考虑子元素之前和之后的文本值。

function getText(selector) {
  return Array.from(document.querySelector(selector).childNodes)
    .reduce((text, node) => text + (node.wholeText || ''), '');
}

console.log(getText('p.aaa'));

<p class="aaa"> aaa <span class="bbb"> bbb </span> ccc </p>

Answer 3

document.querySelector('p.aaa').firstChild

将按原样返回您要求的文本。然后，如果需要删除多余的空格，可以trim()。

但是我也要检查值是否为简单文本，例如'aaa'或标签，以防您可能有其他满足选择器要求的元素，但其第一个子元素可能是html element（tag）而不是simple文字。

Answer 4

您可以使用：let text = document.querySelector('.aaa').childNodes[0].textContent.trim()

如何仅获取包含<span>标签的<p>标签文本

4 个答案: