前言

在当今这个数据驱动的时代，信息的获取与处理成为了技术发展的重要一环。随着人工智能（AI）技术的不断成熟与普及，其与Web开发领域的融合正引领着一场革命性的变化。在这个背景下，JavaScript作为浏览器端编程的王者，不再仅仅局限于实现网页动态效果和用户交互，它正通过与AI技术的巧妙结合，解锁了从前难以想象的数据抓取与分析能力

正文

1.传统编程JavaScript的使用

我们以爬取豆瓣电影排行榜为例

URL：movie.douban.com/chart

在写代码时，我们需要引入两个库

1.'request-promise'库

request-promise是一个基于Node.js的HTTP客户端库，它为流行的request模块提供了Promise接口和一些额外的功能。简单来说，它允许开发者以更现代、易于理解和使用的Promise风格来发送HTTP请求，而不是传统的回调函数方式。这使得处理异步操作，如网页抓取、API调用等，变得更加简洁和直观。

2.'cheerio'库

Cheerio是一个快速、灵活、轻量级的Node.js库，用于处理HTML文档，它提供了类似于jQuery的API来解析和操作DOM。Cheerio的设计初衷是为了在服务器端能够高效地抓取网页数据、处理HTML内容，特别是在构建爬虫和其他自动化脚本时非常有用。与jQuery相似，你可以使用CSS选择器来选取文档中的元素，然后进行诸如获取或修改属性、文本内容，或者添加、删除DOM元素等操作

在控制终端输入以下代码来下载这两个库

js

复制代码
npm i request-promise

js

复制代码
npm i cheerio

接着在js文件中写下代码引入库

js

复制代码
const request = require('request-promise')
const cheerio = require('cheerio')

然后我们开始写我们的主要代码

写代码前先思考逻辑：

1.根据url发送http请求，拿到html

2.根据html分析，再拿到电影的内容

3.返回内容并输出

思考完毕！开始动手！

js

复制代码
const request = require('request-promise')
const cheerio = require('cheerio')


async function main() {

const URL="https://movie.douban.com/chart"

//发送http请求
const html = await request({
        url: URL
    });
    //利用cheerio库将html字符串加载到内存中，$ = Document
    let $ = cheerio.load(html);
    
    const movieNodes = $('#content .article .item')
    const movieList = []
    for (let i = 0; i < movieNodes.length; i++){
     movieList.push(getMovieInfo(movieNodes[i]));
   }
   console.log(movieList)
}

//getMovieInfo函数，获取电影信息交给主函数的movieList封装
const getMovieInfo = function(node) {
    let movieInfo = {};
    //将tr加载进内存
    let $$ = cheerio.load(node)
    let title = $$('.pl2 a').text()
    let pic = $$('.nbg img').attr('src')
    let info = $$('p.pl').text()
    let rating_nums = $$('.rating_nums').text()
        movieInfo.title = title
        movieInfo.pic = pic
        movieInfo.info = info
        movieInfo.rating_nums = rating_nums
    return movieInfo


}
main()
    

搞定！

js

复制代码
[
  {
    title: '\n' +
      '                        盟军敢死队\n' +
      '                        / 绝密型战 / 无限制军团(港)\n' +
      '                    ',
    pic: 'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2908134079.jpg',
    info: '2024-04-18(中国香港) / 2024-04-19(美国) / 2024-05-24(中国大陆) / 亨利·卡维尔 / 艾莎·冈萨雷斯 / 阿兰·里奇森 / 亚历克斯·帕蒂弗 / 赫洛·费因斯-提芬 / 巴布斯·奥卢桑莫昆 / 亨利·扎格 / 蒂尔·施威格 / 亨利·戈尔丁 / 加利·艾尔维斯 / 弗莱迪·福克斯...',
    rating_nums: '7.1'
  },
  {
    title: '\n' +
      '                        对你的想象\n' +
      '                        / 关于你的想法 / 概念中的你\n' +
      '                    ',
    pic: 'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2905327559.jpg',
    info: '2024-03-16(西南偏南电影节) / 2024-05-02(美国网络) / 安妮·海瑟薇 / 尼古拉斯·加利齐纳 / 艾拉·鲁宾 / 安妮·玛莫罗 / 瑞德·斯科特 / 帕芮·马费尔德 / 乔丹·亚伦·霍尔 / 玛蒂尔达·吉安诺普洛斯 / Meg Millidge / 奇克·曼诺哈 / Ray Cham / Jaiden...',
    rating_nums: '5.9'
  },
  {
    title: '\n                        挑战者\n                    ',
    pic: 'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2902765793.jpg',
    info: '2024-04-17(澳大利亚) / 2024-04-26(美国) / 赞达亚 / 乔什·奥康纳 / 迈克·费斯特 / 费斯·费伊 / 安德烈·加布瓦 / 艾梅莉娅·卡米尔·海伍德 / 杰克·詹森 / A·J·利斯特 / 沙恩·T·哈里斯 / 基努·哈姆 / 卡莱恩·富尼耶 / 考特尼·布鲁克斯 /...',
    rating_nums: '6.6'
  },
  {
    title: '\n' +
      '                        哥斯拉-1.0\n' +
      '                        / 超大作怪獣映画 / 哥斯拉：负一\n' +
      '                    ',
    pic: 'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2900227040.jpg',
    info: '2023-11-01(东京国际电影节) / 2023-11-03(日本) / 神木隆之介 / 滨边美波 / 山田裕贵 / 青木崇高 / 吉冈秀隆 / 安藤樱 / 佐佐木藏之介 / 西垣匠 / 中村织央 / 谷口翔太 /  须田邦裕 / 水桥研二 / 阿南健治 / 饭田基祐 / 远藤雄弥 / 田中美央 / 桥爪功...',
    rating_nums: '6.5'
  },
  {
    title: '\n' +
      '                        银河写手\n' +
      '                        / Galaxy Writer\n' +
      '                    ',
    pic: 'https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2905680871.jpg',
    info: '2023-07-24(FIRST青年电影展) / 2024-03-30(中国大陆) / 宋木子 / 合文俊 / 李飞 / 李文茹 / 宋晓亮 / 张皓森 / 刘默然 / 祁又一 / 魏来 / 白志强 / 李阔 / 单丹丹 /  尹思 淇 / 沈腾 / 中国大陆 / 李阔 / 单丹丹 / 103分钟 / 106分钟(影展版) / 剧情 / 喜剧...',
    rating_nums: '6.5'
  },
  {
    title: '\n' +
      '                        破墓\n' +
      '                        / The Unearthed Grave / Exhuma\n' +
      '                    ',
    pic: 'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2905896429.jpg',
    info: '2024-02-16(柏林电影节) / 2024-02-22(韩国) / 崔岷植 / 金高银 / 柳海真 / 李到晛 / 全镇基 / 洪瑞俊 / 李大卫 / 小山力也 / 金智安 / 金善映 / 韩国 / 张在现 / 134分钟 / 破墓 / 悬疑 / 惊悚 / 恐怖 / 张宰贤 Jae-hyun Jang / 韩语 / 日语 / 英语',
    rating_nums: '6.7'
  },
  {
    title: '\n' +
      '                        噬血芭蕾\n' +
      '                        / 阿比盖尔 / 血滴姬(港)\n' +
      '                    ',
    pic: 'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2907891933.jpg',
    info: '2024-04-19(美国) / 阿丽莎·威尔 / 梅丽莎·巴雷拉 / 丹·史蒂文斯 / 凯瑟琳·纽顿 / 凯文·杜兰 / 吉安卡罗·埃斯波西托 / 安格斯·克劳德 / 威廉·卡特列特 / 马修·古迪 / 美国 / 马特·贝蒂内利-奥尔平 / 泰勒·吉勒特 / 109分钟 / 噬血芭蕾...',
    rating_nums: '6.1'
  },
  {
    title: '\n' +
      '                        老狐狸\n' +
      '                        / 老狐狸没教我的事 / Old Fox\n' +
      '                    ',
    pic: 'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2900908599.jpg',
    info: '2023-10-27(东京国际电影节) / 2023-11-24(中国台湾) / 白润音 / 刘冠廷 / 陈慕义 / 刘奕儿 / 门胁麦 / 黄健玮 / 温升豪 / 班铁翔 / 杨丽音 / 傅孟柏 / 高英轩 / 庄益增 /  张再兴 / 许博维 / 管罄 / 钟瑶 / 游珈瑄 / 郑旸恩 / 戴雅芝 / 姜仁 / 萧鸿文...',
    rating_nums: '8.1'
  },
  {
    title: '\n' +
      '                        黄雀在后！\n' +
      '                        / 黄雀在后 / 被害人\n' +
      '                    ',
    pic: 'https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2905336155.jpg',
    info: '2024-04-03(中国大陆) / 冯绍峰 / 陶虹 / 黄觉 / 苏鑫 / 张海宇 / 黄梦莹 / 陈禹同 / 杨烨儿 / 涂松岩 / 樊登 / 黄曦彦 / 刘泽星 / 吕一丁 / 彭梓桁 / 孙德强 / 赵成顺 / 王震明 / 佘雪娇 / 杨峥 / 中国大陆 / 徐伟 / 何文超 / 99分钟 / 剧情 / 犯罪...',
    rating_nums: '6.0'
  },
  {
    title: '\n' +
      '                        美国内战\n' +
      '                        / 内战 / 帝国浩劫：美国内战(台)\n' +
      '                    ',
    pic: 'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2908241970.jpg',
    info: '2024-03-14(西南偏南电影节) / 2024-04-12(美国) / 2024-06-07(中国大陆) / 克斯汀·邓斯特 / 瓦格纳·马拉 / 斯蒂芬·亨德森 / 卡莉·史派妮 / 水野索诺娅 / 尼克·奥弗曼 / 杰 西·普莱蒙 / 杰佛逊·怀特 / 卡尔·格洛斯曼 / 阿历萨·芒索 / 胡安尼·费利兹...',
    rating_nums: '7.0'
  }
]

2.JavaScript和AI的融合

同样的，我们在使用AI的时候也需要调用一个库

'openai'库

js

复制代码
npm i openai

使用该命令将会安装这个包，允许你通过JavaScript代码调用OpenAI的API

既然用了openai的库，我们就需要调用他的api才能使用openai来完成代码

那么我们编写代码的逻辑就变成了

1.根据url发送http请求，拿到html

2.将html用cheerio选择，然后调用API将选择后的html发送给AI

3.AI返回内容

开始动手！

js

复制代码
const request = require('request-promise')
const cheerio = require('cheerio')
const OpenAI = require('openai')

//调用API
const client = new OpenAI({
    //这里需要输入自己购买的openai的API和URL
    apiKey:'',
    baseURL:''
   
})

async function main() {
   
    const URL="https://movie.douban.com/chart"
    
    const html = await request({
        url: URL
    });
    
    let $ = cheerio.load(html);
   
    const movieNodes = $('#content .article .item')
    let movie_html = ''

    for(let i=0;i<movieNodes.length;i++){
        movie_html+=cheerio.load(movieNodes[i]).html() 
    }    
    let prompt =`
    ${movie_html}
    这是一段电影列表，请获取电影名(name),封面链接(picture),简介(info),评分(score),评论人数(comment_nums)
    请将电影信息以json格式返回
    
    `
//使用大模型
const chatCompletion = await client.chat.completions.create({
    messages: [{role: 'user', content: prompt}],
    model: 'gpt-3.5-turbo',
    
});
console.log(chatCompletion.choices);
}

搞定！下班！

有什么问题可以评论或私信博主，博主会力所能及的，求赞qwq。

源文：JavaScript爬取前端信息，原来还能用AI？！

如有侵权请联系站点删除！