无需jQuery：如何定位href特定段并用于JavaScript条件判断

嘿，我来帮你拆解并解决这三个问题，都是前端开发里很常见的场景哦～

一、怎么定位href链接里的特定分段？ #

要提取href里的分段其实很简单，我们可以用JavaScript的split('/')方法，把整个URL按斜杠/拆成一个数组。比如你给的例子href="/a/b/c/d/e/index.html"，拆分后得到的数组是：["", "a", "b", "c", "d", "e", "index.html"]。

注意数组是从0开始计数的，你说的“C段”是第三段的话，对应的索引是2，直接取segments[2]就能拿到c这个分段啦。

二、实现判断第三段包含C的if语句逻辑 #

拿到目标分段后，用includes()方法就能轻松判断是否包含指定字符。如果需要忽略大小写（比如不管是大写C还是小写c都匹配），可以先把分段转成统一大小写再判断。核心代码逻辑如下：

// 假设已经获取到了href的值
const href = "/a/b/c/d/e/index.html";
// 按斜杠拆分成分段数组
const segments = href.split('/');
// 取出第三段（索引为2）
const thirdSegment = segments[2];

// 严格区分大小写的判断
if (thirdSegment.includes('C')) {
  // 这里写你要执行的操作
  console.log("第三段包含大写C");
}

// 不区分大小写的判断（更实用）
if (thirdSegment.toLowerCase().includes('c')) {
  console.log("第三段包含C/c");
}

三、批量处理带href的div，给指定元素添加class #

首先先修正下你提供的HTML语法错误（原代码里的<a>标签闭合有误），修正后的结构大概是这样：

<div class="a-1" href="/a/b/c/d/e/index.html"> 
  <a class="location">text</a> 
</div>
<div class="a-1" href="/x/y/Z/d/e/index.html"> 
  <a class="location">text2</a> 
</div>

接下来我们可以用querySelectorAll选中所有带href属性的.a-1div，然后逐个遍历处理，实现你要的逻辑：

// 选中所有带href属性的.a-1类div
const targetDivs = document.querySelectorAll('div.a-1[href]');

// 遍历每个div
targetDivs.forEach(div => {
  // 获取当前div的href属性值
  const href = div.getAttribute('href');
  // 拆分成分段数组
  const segments = href.split('/');

  // 先判断数组长度足够，避免索引越界报错
  if (segments.length >= 3) {
    const thirdSegment = segments[2];
    // 判断第三段是否包含C（不区分大小写）
    if (thirdSegment.toLowerCase().includes('c')) {
      // 找到div内的.sample元素（如果你的目标是HTML里的.location，就改成'.location'）
      const sampleElement = div.querySelector('.sample');
      // 确保元素存在再添加class，避免报错
      if (sampleElement) {
        sampleElement.classList.add('your-target-class');
      }
    }
  }
});

几个小提醒： #

• 用div.a-1[href]作为选择器，能精准筛选出带href属性的目标div，不会误选其他元素
• 增加segments.length >=3的判断，是为了防止某些格式不规范的href（比如分段不足3个）导致的报错
• 添加class前先判断目标元素是否存在，避免控制台出现找不到元素的错误

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