React: Extract hostname name from url

Question

I have a list where I'm displaying media links as iframes using Embed component. Normally in my input, any pasted link will generate a specific iframe, meaning youtube has it iframe, twitter etc..

My question, is there a way to display or save the name of the website of the written url in title ? So for example when pasting a Twitch link, the title will be Twitch. As far as I know "Embed" do something like this to detect the link and give it the appropriate iframe.

https://codesandbox.io/s/suspicious-cherry-ngv0h?file=/src/App.js

import React, { useState } from "react";
import Embed from "react-embed";

export default () => {
  const reactList = [
    {
      id: "2",
      title: "Twitter",
      media: "https://twitter.com/Betclic/status/1382074820628783116?s=20"
    }
  ];

  const [links, setLinks] = useState(reactList);
  const [media, setMedia] = React.useState("");

  function handleChange(event) {
    setMedia(event.target.value);
  }

  function handleAdd() {
    const newList = links.concat({ media });
    setLinks(newList);
  }

  return (
    <div>
      <div>
        <input type="text" value={media} onChange={handleChange} />
        <button type="button" onClick={handleAdd}>
          Add
        </button>
      </div>

      <ul>
        <div style={{ width: "50vh" }}>
          {links.reverse().map((url, indexurl) => (
            <li key={url.id}>
              <div>{url.title}</div>
              <Embed url={url.media} />
            </li>
          ))}
        </div>
      </ul>
    </div>
  );
};

Peter Seliger · Accepted Answer · 2021-04-14 10:04:40Z

2

Please make use of the URL API and any URL instance's hostname property

console.log(
  new URL(
    'https://twitter.com/Betclic/status/1382074820628783116?s=20'
  ).hostname
);
console.log(
  new URL(
    'https://stackoverflow.com/questions/67085372/react-extract-hostname-name-from-url'
  ).hostname
);
console.log(
  new URL(
    'https://developer.mozilla.org/en-US/docs/Web/API/URL/hostname'
  ).hostname
);

.as-console-wrapper { min-height: 100%!important; top: 0; }

edited Apr 14, 2021 at 10:04

answered Apr 14, 2021 at 9:57

Peter Seliger

13.5k3 gold badges31 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AlyaKra Over a year ago

Thank you. As the beginner in React as I'm, I failed to implement it in my code. It has to be in the changeHandle right ?

cd3k · Accepted Answer · 2021-04-14 04:22:46Z

1

You could try extracting it with a regex pattern:

const title = url.media.replace(/https:\/\/(\w+).*/, '\1');

This finds the https:// at the beginning then captures any word char after it, using the parentheses. The \1 is like a variable for the captured text.

answered Apr 14, 2021 at 4:22

cd3k

8227 silver badges11 bronze badges

1 Comment

AlyaKra Over a year ago

Thank you. Should I put if in the changeHandle ?

Udendu Abasili · Accepted Answer · 2021-04-14 04:35:08Z

1

Here is a simple regex function that would capture what you are looking for. This is a simple example

let url= 'www.google.com'
url.replace(/(https?:\/\/)?(www\.)/, '').split('.')[0]

s? Indicates the s is optional so we would check for https:// or http:// and also www. due to the second bracket. This would capture both the title you want and the suffix but since we only want the title hence we use [0]

answered Apr 14, 2021 at 4:35

Udendu Abasili

1,2232 gold badges16 silver badges31 bronze badges

1 Comment

AlyaKra Over a year ago

Thank you ! Would you mind including it in the code I provided? I failed to do so as I'm just starting React. I tried to put in the handleChange.

shahryarab · Accepted Answer · 2021-04-14 10:57:11Z

1

you can extract media with this way :

const hash = media.substring(media.indexOf('://') + 1);
let result = hash.split('/');
console.log(result[2]); // extracted media

answered Apr 14, 2021 at 10:57

shahryarab

1091 gold badge2 silver badges7 bronze badges

Collectives™ on Stack Overflow

React: Extract hostname name from url

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related