获取跨度文本 jQuery - JavaScript

当我们需要获取一个元素的跨度文本（包含所有子元素的文本）时，我们可以使用 jQuery 或原生 JavaScript。

获取跨度文本的 jQuery 方法

.text()

.text() 方法可以获取元素的文本，并且会递归地获取所有子元素的文本。

const spanText = $('span').text();

上述代码将获取所有 span 元素的跨度文本。返回的值将是一个字符串。

.html()

.html() 方法与 .text() 的用法类似，不同之处在于，它会获取元素和所有子元素的 HTML 内容。但是，这个方法返回的是一个字符串。

const spanHtml = $('span').html();

上述代码会获取所有 span 元素的 HTML 内容。返回的值将是一个字符串。

获取跨度文本的原生 JavaScript 方法

通过原生 JavaScript，我们可以使用 innerText 或 textContent 属性来获取跨度文本。

.innerText

innerText 只是像 .text() 方法一样返回元素的文本，而不需要指定元素的标签名称。

const spanText = document.querySelector('span').innerText;

上述代码将获取第一个 span 元素的跨度文本。返回的值将是一个字符串。

.textContent

.textContent 属性与 .innerText 的用法类似，但是它对任何元素都有效，而不仅仅是可见的元素。

const spanText = document.querySelector('span').textContent;

上述代码将获取第一个 span 元素的跨度文本。返回的值将是一个字符串。

总结

以上就是获取跨度文本的 jQuery 和原生 JavaScript 方法，我们可以根据自己的需要选择一种。需要注意的是，在 jQuery 中使用 .html() 方法时，要非常小心，因为它可能导致 XSS 漏洞。如果我们不信任源代码中的 HTML，可以使用 .text() 方法代替 .html() 方法。