js原生怎么判断src

JS原生怎么判断src

要判断一个HTML元素的src属性是否存在或有效，可以通过获取元素的src属性、使用正则表达式验证URL格式、以及使用JavaScript内置的fetch方法检查资源是否存在。这些方法可以帮助开发者确保他们的代码在处理图片、视频或其他资源时更加稳健。以下将详细介绍如何应用这些方法中的一种。

一、获取元素的src属性

在JavaScript中，可以通过getAttribute方法直接获取HTML元素的src属性值。

1. 使用getAttribute方法

getAttribute方法可以用来获取元素的特定属性值。假设我们有一个图片元素：

<img id="myImage" src="https://example.com/image.jpg" alt="Example Image">

我们可以使用以下JavaScript代码来获取它的src属性：

const imgElement = document.getElementById('myImage');
const srcValue = imgElement.getAttribute('src');
console.log(srcValue);  // 输出: https://example.com/image.jpg

通过这种方式，我们可以轻松地获取到图片元素的src属性值。

二、验证URL格式

为了确保获取到的src属性值是一个有效的URL，可以使用正则表达式进行验证。

1. 使用正则表达式

以下是一个简单的正则表达式，用于验证URL格式：

function isValidURL(url) {
    const pattern = new RegExp('^(https?:\/\/)?'+ // 协议
        '((([a-z\d]([a-z\d-]*[a-z\d])*)\.?)+[a-z]{2,}|'+ // 域名
        '((\d{1,3}\.){3}\d{1,3}))'+ // OR ip (v4) 地址
        '(\:\d+)?(\/[-a-z\d%_.~+]*)*'+ // 端口和路径
        '(\?[;&a-z\d%_.~+=-]*)?'+ // 查询字符串
        '(\#[-a-z\d_]*)?$','i'); // 片段标识符
    return !!pattern.test(url);
}
const url = imgElement.getAttribute('src');
if (isValidURL(url)) {
    console.log('URL is valid');
} else {
    console.log('URL is invalid');
}

通过这种方式，可以有效地验证src属性值是否为有效的URL。

三、检查资源是否存在

获取到有效的URL后，可以使用JavaScript的fetch方法来检查资源是否存在。

1. 使用fetch方法

以下代码示例演示如何使用fetch方法来检查资源是否存在：

function checkResource(url) {
    fetch(url, { method: 'HEAD' })
        .then(response => {
            if (response.ok) {
                console.log('Resource exists');
            } else {
                console.log('Resource does not exist');
            }
        })
        .catch(error => {
            console.log('Error:', error);
        });
}
const url = imgElement.getAttribute('src');
if (isValidURL(url)) {
    checkResource(url);
} else {
    console.log('URL is invalid');
}

fetch方法可以发送一个HTTP请求来检查资源是否存在。通过这种方式，可以确保我们所使用的资源是可访问的。

四、综合示例

以下是一个综合示例，展示了如何结合以上方法来判断一个HTML元素的src属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Check Image Src</title>
</head>
<body>
    <img id="myImage" src="https://example.com/image.jpg" alt="Example Image">
    <script>
        function isValidURL(url) {
            const pattern = new RegExp('^(https?:\/\/)?'+ // 协议
                '((([a-z\d]([a-z\d-]*[a-z\d])*)\.?)+[a-z]{2,}|'+ // 域名
                '((\d{1,3}\.){3}\d{1,3}))'+ // OR ip (v4) 地址
                '(\:\d+)?(\/[-a-z\d%_.~+]*)*'+ // 端口和路径
                '(\?[;&a-z\d%_.~+=-]*)?'+ // 查询字符串
                '(\#[-a-z\d_]*)?$','i'); // 片段标识符
            return !!pattern.test(url);
        }
        function checkResource(url) {
            fetch(url, { method: 'HEAD' })
                .then(response => {
                    if (response.ok) {
                        console.log('Resource exists');
                    } else {
                        console.log('Resource does not exist');
                    }
                })
                .catch(error => {
                    console.log('Error:', error);
                });
        }
        const imgElement = document.getElementById('myImage');
        const srcValue = imgElement.getAttribute('src');
        console.log(srcValue);  // 输出: https://example.com/image.jpg
        if (isValidURL(srcValue)) {
            checkResource(srcValue);
        } else {
            console.log('URL is invalid');
        }
    </script>
</body>
</html>

通过以上步骤，我们可以完整地判断一个HTML元素的src属性是否存在以及是否有效，并确保资源是可访问的。这种方法不仅适用于图片，还可以应用于其他类型的资源，如视频和音频文件。