基于jQuery实现点击按钮时从列表锚标签生成JSON数组对象

我明白你要实现的需求了——点击按钮后遍历页面中的列表及其锚标签，提取每个锚标签的文本内容作为title、href属性作为URL，最终生成和你目标示例结构一致的JSON数组对吧？下面给你一套直接可用的实现方案：

1. 先确认你的HTML结构示例 #

假设你的页面列表结构是类似这样的（如果实际结构不同，只需要调整选择器即可）：

<ul class="link-list">
  <li><a href="https://example.com/page1">首页介绍</a></li>
  <li><a href="https://example.com/page2">功能文档</a></li>
  <li><a href="https://example.com/page3">常见问题</a></li>
</ul>
<button id="generateBtn">生成JSON</button>
<!-- 可以加个区域显示结果 -->
<pre id="jsonResult"></pre>

2. JavaScript实现代码（jQuery版本） #

如果你项目里已经引入了jQuery，用这个方案最快捷：

$(document).ready(function() {
  $('#generateBtn').click(function() {
    // 定义空数组存储结果
    const resultArray = [];
    
    // 遍历所有列表中的锚标签（这里用.link-list下的a，可根据实际结构调整选择器）
    $('.link-list li a').each(function() {
      // 提取当前锚标签的文本和href
      const itemTitle = $(this).html(); // 或者用.text()获取纯文本，根据需求选
      const itemUrl = $(this).attr('href');
      
      // 把对象推入数组（如果需要过滤空值，可以加判断：if(itemTitle && itemUrl)）
      resultArray.push({
        title: itemTitle,
        URL: itemUrl
      });
    });
    
    // 转成格式化的JSON字符串
    const jsonString = JSON.stringify(resultArray, null, 2);
    
    // 可以把结果输出到页面，或者做其他处理
    $('#jsonResult').text(jsonString);
    // 如果需要复制到剪贴板，还可以加navigator.clipboard.writeText(jsonString)
  });
});

3. 原生JavaScript版本（无需jQuery） #

如果项目没用到jQuery，用原生JS也能轻松实现：

document.addEventListener('DOMContentLoaded', function() {
  const generateBtn = document.getElementById('generateBtn');
  const jsonResult = document.getElementById('jsonResult');
  
  generateBtn.addEventListener('click', function() {
    const resultArray = [];
    // 获取所有列表中的锚标签，选择器根据实际结构调整
    const anchorTags = document.querySelectorAll('.link-list li a');
    
    anchorTags.forEach(function(tag) {
      const itemTitle = tag.innerHTML; // 或者tag.textContent获取纯文本
      const itemUrl = tag.getAttribute('href');
      
      resultArray.push({
        title: itemTitle,
        URL: itemUrl
      });
    });
    
    const jsonString = JSON.stringify(resultArray, null, 2);
    jsonResult.textContent = jsonString;
  });
});

关键注意点 #

• 选择器调整：代码里的.link-list li a是示例选择器，你需要根据自己页面的实际列表类名/结构修改，比如如果是所有<ul>下的<a>，可以改成ul li a
• 文本获取：html()（或innerHTML）会保留锚标签内的HTML格式，如果你只需要纯文本，换成text()（jQuery）或textContent（原生JS）
• 空值过滤：如果担心有些锚标签没有href或文本为空，可以在push前加判断：if(itemTitle.trim() && itemUrl)，避免生成无效对象

这样点击按钮后就能生成你需要的JSON数组了，完全匹配你要的结构~

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