vue 判断字符串开头是http或者https

在 Vue 中判断字符串是否以 http 或 https 开头，可以通过以下步骤实现：

方法一：使用 startsWith() 方法

// 在 Vue 组件的方法或计算属性中
isExternalLink(url) {return url?.startsWith('http://') || url?.startsWith('https://');
}

方法二：使用正则表达式（推荐）

isExternalLink(url) {return /^https?:\/\//i.test(url || '');
}

说明：

• ^https?:\/\/ 匹配以 http:// 或 https:// 开头的字符串。
• i 表示不区分大小写（如 HTTP:// 也会被匹配）。
• 使用可选链操作符 ?. 和默认空字符串防止 url 为 null 或 undefined 时报错。

在 Vue 模板中使用

<template><a :href="url" :target="isExternalLink(url) ? '_blank' : '_self'">链接</a>
</template><script>
export default {data() {return {url: 'https://example.com'}},methods: {isExternalLink(url) {return /^https?:\/\//i.test(url || '');}}
}
</script>

处理边缘情况

1. 空值处理：如果 url 可能为空，使用 url || '' 确保传入的是字符串。
2. 协议相对 URL：若需排除 //example.com 这种形式，正则表达式保持不变即可，因为它只匹配明确带有 http 或 https 的情况。

示例：动态绑定图片路径

<template><img :src="fullImageUrl" alt="示例图片">
</template><script>
export default {data() {return {imageUrl: 'user-uploaded/image.jpg',basePath: 'https://cdn.example.com/'}},computed: {fullImageUrl() {return this.isExternalLink(this.imageUrl) ? this.imageUrl : `${this.basePath}${this.imageUrl}`;}},methods: {isExternalLink(url) {return /^https?:\/\//i.test(url || '');}}
}
</script>

关键点总结：

• 正则效率：正则表达式更简洁且能直接处理大小写问题。
• 防御性代码：处理可能的空值，避免运行时错误。
• 逻辑复用：将判断逻辑封装成方法或计算属性，提高代码复用性。