jquery只获取div中的第一个字符串

在上述示例中,"第一个字符串"应为"这是第一个字符串"（忽略子元素内的文本和空白）。

实现方法：通过jQuery精准提取

jQuery提供了多种方法操作DOM节点,结合节点筛选即可实现目标，以下是两种常用方案：

方法1：使用contents() + filter() + first()（推荐）

contents()方法可获取元素的所有子节点（包括文本节点、元素节点等），通过filter()筛选出文本节点（nodeType === 3），再用first()取第一个，最后用text()。

示例代码：

// HTML结构
<div id="targetDiv">  
  这是第一个字符串  
  <span>子元素文本</span>  
  <p>另一个文本节点</p>  
</div>  
// jQuery代码
const firstString = $("#targetDiv")  
  .contents()          // 获取所有子节点（文本、元素、注释等）  
  .filter(function() {  
    return this.nodeType === 3; // 筛选文本节点（nodeType=3）  
  })  
  .first()             // 取第一个文本节点  
  .text()              // 提取文本内容  
  .trim();             // 去除首尾空白（可选）  
console.log(firstString); // 输出："这是第一个字符串"

代码解析：

1. contents()：返回#targetDiv的所有直接子节点，包括文本节点（如"这是第一个字符串"）和元素节点（如<span>、<p>）。
2. filter(function() { return this.nodeType === 3 })：筛选出文本节点（nodeType为3表示文本节点）。
3. first()：取筛选后的第一个文本节点。
4. text()：提取该文本节点的文本内容。
5. trim()：去除文本首尾的空白字符（如换行、空格），避免因HTML格式问题导致多余空格。

方法2：使用children() + prevObject（处理复杂嵌套）

如果<div>的第一个子节点是元素（如<span>），而"第一个字符串"是元素前的文本节点，可通过children()结合prevObject间接获取。

示例代码：

// HTML结构（第一个文本节点后紧跟子元素）
<div id="targetDiv">  
  前置文本  
  <span>子元素内容</span>  
  后续文本  
</div>  
// jQuery代码
const firstString = $("#targetDiv")  
  .children()         // 获取所有子元素（排除文本节点）  
  .first()             // 取第一个子元素（如<span>）  
  .prevObject         // 获取子元素前的所有节点（包括文本节点）  
  .filter(function() {  
    return this.nodeType === 3;  
  })  
  .first()  
  .text()  
  .trim();  
console.log(firstString); // 输出："前置文本"

适用场景：

当<div>的第一个文本节点位于子元素之前，且需要跳过子元素直接获取该文本时，此方法更适用。

注意事项与边界情况处理

在实际应用中,需考虑以下边界情况，确保代码健壮性：

处理空白文本节点

HTML中,标签间的换行和缩进会被解析为文本节点（如\n），可能导致"第一个字符串"是空白，此时需用trim()过滤，或进一步判断文本是否为空：

const firstString = $("#targetDiv")  
  .contents()  
  .filter(function() {  
    return this.nodeType === 3 && this.textContent.trim() !== ""; // 过滤空白文本节点  
  })  
  .first()  
  .text();  
console.log(firstString); // 忽略空白，取第一个非空文本

处理无文本节点的情况

如果<div>内只有元素节点（如<div><span>无文本</span></div>），上述方法会返回undefined，需添加判断：

const firstTextNode = $("#targetDiv")  
  .contents()  
  .filter(function() {  
    return this.nodeType === 3 && this.textContent.trim() !== "";  
  })  
  .first();  
const firstString = firstTextNode.length ? firstTextNode.text() : "无有效文本";  
console.log(firstString); // 输出："无有效文本"

区分"直接子文本"与"所有文本"

若需求是获取<div>内所有文本（包括子元素内的文本）中的"第一个字符串"，可用text()方法直接获取，再拆分字符串：

// 获取div内所有文本（包括子元素），取第一个非空字符串
const allText = $("#targetDiv").text().trim();  
const firstString = allText ? allText.split(/\s+/)[0] : ""; // 按空格拆分，取第一个词  
console.log(firstString); // <div>hello <span>world</span></div> → 输出"hello"

高级应用：处理动态内容和特殊字符

在实际项目中,我们可能需要处理更复杂的情况：

处理动态加载的内容

$(document).on("DOMNodeInserted", "#targetDiv", function() {
  const firstString = $(this)
    .contents()
    .filter(function() {
      return this.nodeType === 3 && this.textContent.trim() !== "";
    })
    .first()
    .text()
    .trim();
  console.log("动态加载的第一个字符串:", firstString);
});

处理HTML实体和特殊字符

// 自动解码HTML实体
const firstString = $("#targetDiv")
  .contents()
  .filter(function() {
    return this.nodeType === 3 && this.textContent.trim() !== "";
  })
  .first()
  .text()
  .trim()
  .replace(/&amp

标签： #jquery div #获取 #第一个字符串