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>

关键点总结：

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