当前位置：首页 > news >正文

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

news 来源：原创 2025/6/3 17:26:50

在 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>

处理边缘情况

空值处理：如果 url 可能为空，使用 url || '' 确保传入的是字符串。
协议相对 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>