如何用JavaScript/React提取YouTube视频描述地址并地理编码获经纬度

一、提取地址 #

你的视频描述里的地址都是以ADDRESS:开头的单行内容，用正则表达式就能快速匹配提取。下面是JavaScript实现代码：

const videoDescription = `这里替换成你的完整视频描述文本`;

// 匹配所有以ADDRESS:开头的地址行
const addressRegex = /ADDRESS:\s*(.*)/g;
const extractedAddresses = [];
let matchResult;

while ((matchResult = addressRegex.exec(videoDescription)) !== null) {
  extractedAddresses.push(matchResult[1].trim());
}

console.log('提取到的地址:', extractedAddresses);
// 输出示例: ["49/3 Trần Hưng Đạo, Sơn Phong, Hội An, Quảng Nam 56000", "Lê Thánh Tông street, An Phú ward, Tam Kỳ city, Quảng Nam Province"]

这段代码会遍历整个描述文本，把所有符合格式的地址提取出来存到数组里，方便后续处理。

二、地理编码获取经纬度 #

可以用公开的地理编码API把地址转换成经纬度，下面给出两种常用实现：

1. 纯JavaScript批量处理（用OpenStreetMap Nominatim免费API） #

async function getLatLon(address) {
  try {
    const encodedAddr = encodeURIComponent(address);
    const response = await fetch(`https://nominatim.openstreetmap.org/search?q=${encodedAddr}&format=json&limit=1`);
    const data = await response.json();
    
    if (data.length > 0) {
      return {
        latitude: parseFloat(data[0].lat),
        longitude: parseFloat(data[0].lon)
      };
    } else {
      throw new Error('没找到对应地址的坐标');
    }
  } catch (error) {
    console.error(`处理地址 ${address} 失败:`, error);
    return null;
  }
}

// 批量处理提取到的地址
async function processAllAddresses(addressList) {
  const resultList = [];
  for (const addr of addressList) {
    const coords = await getLatLon(addr);
    resultList.push({ address: addr, coordinates: coords });
    // 加个延迟，避免触发API频率限制
    await new Promise(resolve => setTimeout(resolve, 1000));
  }
  return resultList;
}

// 调用示例
processAllAddresses(extractedAddresses).then(finalResult => {
  console.log('地址与坐标对应结果:', finalResult);
});

2. React组件中集成（结合状态管理） #

import { useState, useEffect } from 'react';

function AddressGeocoder({ videoDesc }) {
  const [addresses, setAddresses] = useState([]);
  const [geoResults, setGeoResults] = useState([]);

  // 提取地址
  useEffect(() => {
    const regex = /ADDRESS:\s*(.*)/g;
    const addrList = [];
    let match;
    while ((match = regex.exec(videoDesc)) !== null) {
      addrList.push(match[1].trim());
    }
    setAddresses(addrList);
  }, [videoDesc]);

  // 批量获取坐标
  useEffect(() => {
    const fetchCoordinates = async () => {
      const results = [];
      for (const addr of addresses) {
        try {
          const encodedAddr = encodeURIComponent(addr);
          const res = await fetch(`https://nominatim.openstreetmap.org/search?q=${encodedAddr}&format=json&limit=1`);
          const data = await res.json();
          if (data.length) {
            results.push({
              address: addr,
              lat: parseFloat(data[0].lat),
              lon: parseFloat(data[0].lon)
            });
          } else {
            results.push({ address: addr, error: '无匹配坐标' });
          }
        } catch (err) {
          results.push({ address: addr, error: err.message });
        }
        await new Promise(resolve => setTimeout(resolve, 1000));
      }
      setGeoResults(results);
    };

    if (addresses.length > 0) {
      fetchCoordinates();
    }
  }, [addresses]);

  return (
    <div className="geocoder-container">
      <h3>提取到的地址</h3>
      <ul>
        {addresses.map((addr, idx) => (
          <li key={idx}>{addr}</li>
        ))}
      </ul>
      <h3>对应经纬度</h3>
      <ul>
        {geoResults.map((item, idx) => (
          <li key={idx}>
            {item.address}: 
            {item.error ? ` 错误: ${item.error}` : ` 纬度: ${item.lat.toFixed(6)}, 经度: ${item.lon.toFixed(6)}`}
          </li>
        ))}
      </ul>
    </div>
  );
}

// 使用组件示例
// <AddressGeocoder videoDesc={你的视频描述文本} />

注意：Nominatim API有请求频率限制，批量处理时一定要加延迟，避免被临时封禁。如果需要更高的请求限额，也可以考虑使用Google Maps Geocoding API（需要自己申请密钥）。

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