如何区分 url 和 javascript 对象中的字符串

Question

我有一个对象，其中包含 media_id 和某种 link，它正在导航到我的音频屏幕页面，第二个 media_id 包含一个字符串，它会转到视频屏幕页。我如何区分它们以导航将它们发送到它们的特定页面。我的代码如下：

API:

{
        "id": 602,
        "title": "Reflections on Africa",
     "media_id": "https://cdn.islamicmedia.com.au/site/2020/03/2019-11-18-Reflections-on-Africa-by-
    },
{
    "id": 595,
    "title": "Reflections on Africa ",
   ahmed-bassal/",
    "media_id": "8ZVwBwq2cTs",


},`

我的代码（如果你需要，会提供更多代码）。我知道我做错了所以请纠正我

<TouchableOpacity
    onPress={() => {
      item.media_id === String
        ? this.props.navigation.navigate('Video', {
            id: item.id,
          })
        : this.props.navigation.navigate('Audio', {
            id: item.id,



          });
    }}>

Answer 1

一个快速简单的解决方案是检查您的字符串是否包含 "https:" https://www.w3schools.com/jsref/jsref_search.asp

Answer 2

您可以使用 startsWith，这是任何字符串原型中的方法。

尝试在您的支票上使用它：

item["media_id"].startsWith("https://")

Answer 3

使用 startsWith 检查 media_id 是否以 https 开头。如果它以 https 开头，则它是 url 否则 id string.

const input = [{
    "id": 602,
    "title": "Reflections on Africa by Brother Ahmed Bassal",
    "media_id": "https://cdn.islamicmedia.com.au/site/2020/03/2019-11-18-Reflections-on-Africa-by-"
  },
  {
    "id": 595,
    "title": "Reflections on Africa by Brother Ahmed Bassal",
    "media_id": "8ZVwBwq2cTs",
  }
];

input.forEach(({
  media_id
}) => {
  if (media_id.startsWith('https')) {
    console.log('URL', media_id);
  } else {
    console.log('ID', media_id);
  }
});

Answer 4

您可以检查子串，

media_id.includes("https://")

或没有 SSL

media_id.includes("https://" | "http://")

现在，如果它以 url 开头或包含另一个 url。你可以区分。

最好的方法是正则表达式

function validURL(str) {
  var pattern = new RegExp('^(https?:\/\/)?'+ // protocol
    '((([a-z\d]([a-z\d-]*[a-z\d])*)\.)+[a-z]{2,}|'+ // domain name
    '((\d{1,3}\.){3}\d{1,3}))'+ // OR ip (v4) address
    '(\:\d+)?(\/[-a-z\d%_.~+]*)*'+ // port and path
    '(\?[;&a-z\d%_.~+=-]*)?'+ // query string
    '(\#[-a-z\d_]*)?$','i'); // fragment locator
  return !!pattern.test(str);
}

Answer 5

尝试使用正则表达式

//arr is your API result
{this.state.arr.map((item, index) => {
  return (
    <TouchableOpacity
       onPress={() => {
         item.media_id.match("^https")
        ? this.props.navigation.navigate('Video', {
            id: item.id,
          })
        : this.props.navigation.navigate('Audio', {
            id: item.id,
          });
    />
  );
)}

Answer 6

您可以尝试解析它，如果解析失败，您就知道它不是 URL！具有适用于任何类型协议的优势，而不仅仅是 HTTP。

function isUrl(thing) {
    try {
        new URL(thing);
        return true;
    } catch (_) {
        return false;
    }
}

那你就可以简单的使用了：

<TouchableOpacity
    onPress={() => {
      isUrl(item.media_id)
        ? this.props.navigation.navigate('Audio', {
            id: item.id,
          })
        : this.props.navigation.navigate('Video', {
            id: item.id,
          });
    }}>

如何区分 url 和 javascript 对象中的字符串

How to differentiate between a url and string in javascript object

javascript

reactjs

react-native

react-native-android

react-navigation