js 提取内容字段里全部图片

在JavaScript中提取内容字段里的全部图片，通常是指从一段HTML文本中提取所有的<img>标签。以下是实现这一功能的基础概念和相关方法：

基础概念

DOM（Document Object Model）：HTML和XML文档的编程接口，它提供了对文档的结构化的表示，并定义了访问和操作文档的方式。
正则表达式：一种强大的文本处理工具，用于匹配字符串的模式。

类型

DOM方法：使用JavaScript的DOM API来遍历和查询文档。
正则表达式：通过编写模式匹配规则来提取图片标签。

应用场景

内容管理系统：在发布文章时自动提取图片以便进行预览或存储。
数据分析：从网页抓取数据时提取图片链接进行分析。
自动化测试：验证页面上的图片是否正确加载。

示例代码

以下是使用DOM方法和正则表达式提取HTML内容中所有图片的示例代码：

使用DOM方法

function extractImagesUsingDOM(htmlContent) {
    const parser = new DOMParser();
    const doc = parser.parseFromString(htmlContent, 'text/html');
    const images = doc.querySelectorAll('img');
    return Array.from(images).map(img => img.src);
}

// 示例使用
const htmlContent = '<div><img src="image1.jpg"><p>Some text</p><img src="image2.png"></div>';
console.log(extractImagesUsingDOM(htmlContent)); // 输出: ["image1.jpg", "image2.png"]

使用正则表达式

function extractImagesUsingRegex(htmlContent) {
    const regex = /<img[^>]+src="([^">]+)"/g;
    let match;
    const images = [];
    while ((match = regex.exec(htmlContent)) !== null) {
        images.push(match[1]);
    }
    return images;
}

// 示例使用
const htmlContent = '<div><img src="image1.jpg"><p>Some text</p><img src="image2.png"></div>';
console.log(extractImagesUsingRegex(htmlContent)); // 输出: ["image1.jpg", "image2.png"]

可能遇到的问题及解决方法

跨站脚本攻击（XSS）：如果HTML内容来自不可信的源，直接解析可能会导致安全问题。解决方法：使用安全的HTML解析库，如DOMPurify，对输入进行清理。

import DOMPurify from 'dompurify';

function safeExtractImages(htmlContent) {
    const cleanHtml = DOMPurify.sanitize(htmlContent);
    const parser = new DOMParser();
    const doc = parser.parseFromString(cleanHtml, 'text/html');
    const images = doc.querySelectorAll('img');
    return Array.from(images).map(img => img.src);
}