如何用jQuery/JavaScript提取指定HTML中Allergies文本？解决重复返回问题

你遇到的$(this).text()返回重复文本的问题，核心原因是没有精准定位到存放"Allergies"的目标span元素，而是获取了父元素下所有子节点的文本内容（大概率是你的$(this)指向的元素包含了重复的文本节点，或者DOM结构里存在你没注意到的重复元素）。

根据你提供的HTML结构，存放目标文本的是带有template-block-title类的span，我们可以通过以下方式精准提取：

方法1：jQuery 实现 #

如果你的$(this)指向的是.chart-component-header或.template-block-header这类父容器，直接通过find()方法定位目标元素：

// 提取并去除多余空格
const allergyText = $(this).find('.template-block-title').text().trim();
console.log(allergyText); // 输出 "Allergies"

如果你的事件绑定在.template-block-header内部的外层span上，也可以用children()直接定位子元素：

const allergyText = $(this).children('.template-block-title').text().trim();

方法2：原生 JavaScript 实现 #

如果不想依赖jQuery，用原生API同样可以实现：

// 定位目标元素并提取文本
const allergyText = this.querySelector('.template-block-title').textContent.trim();
console.log(allergyText); // 输出 "Allergies"

为什么之前会得到重复文本？ #

结合你的HTML结构推测，应该是$(this)指向了包含多个文本节点的父元素（比如外层的<span>或.template-block-header），而text()（或原生textContent）会把该元素下所有子节点的文本拼接起来。如果你的实际DOM中存在重复的文本节点（比如隐藏的克隆元素），就会出现"AllergiesAllergies"的结果。通过精准定位到.template-block-title，就能彻底避免这种问题。

内容的提问来源于stack exchange，提问作者Shalabh Mishra