make website link clickable and hide https://

Question

I have added some code to my website to show the user's website link (please see below) but the website link is not clickable so

1. I want to make the user website link clickable and highlighted.
2. I would like that if the user inputs https://mywebsite.com or https://www.mywebiste.com in that field it only show the website name like this mywebsite.com

Could you help me to achieve it?

add_action( 'bp_profile_header_meta', 'display_user_color_pref' );
function display_user_color_pref() {
    $args = array(
        'field' => 'web', // Field name or ID.
    );

    $my_bio_excerpt = wp_trim_words( bp_get_profile_field_data( $args ), 40, '' );

    if ( $my_bio_excerpt ) {
        echo '<div class="my_bio">';
        echo '' . $my_bio_excerpt; // Put some text if needed between the '' paragraphs.
        echo '</div>';
    }
}

Thank you.

I tried to add this echo line to make the website link clickable but is not working, are there some paragraphs missing?

echo <a href="<?php echo $my_bio_excerpt; ?>" class="">click here</a>

Answer 1

I would suggest to add an <a href></a> to make it a link - see https://www.w3schools.com/tags/att_a_href.asp

Answer 2

Your PHP syntax is wrong in:

echo <a href="<?php echo $my_bio_excerpt; ?>" class="">click here</a>

Should be:

echo "<a href=\"$my_bio_excerpt\" class=\"\">click here</a>";