0

i am getting anchor tag in stringHTML in API response and parsing it using react-html-parser which is working fine. The problem is when I click on the anchor tag URL does append in website URL which makes it wrong URL. You can see in the below image.

enter image description here

So my question is what can i do to avoid this behavior? If URL contains https://www.facebook.com then it is working fine but if it contains www.facebook.com then it append in website url.

Live Code: https://testonqa.vonza.net/scheduling/faheem-saleem

just select any slot and you will redirect to next screen where you will see description in bottom of form.

StringHtml markup in API

description: "<p><a href="www.facebook.com" rel="noopener noreferrer"

My code to parse it

 <span class="text-muted">
    {ReactHtmlParser(eventDescription)}
 </span>
billal
  • 113
  • 1
  • 12
  • www.facebook.com is not a valid URL. You need to add protocol - `https://` or the link becomes relative to the page you are on. This is just how the interwebs work. Voting to close as _Not reproducible or was caused by a typo While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers._ – mplungjan Aug 12 '20 at 12:57
  • Add `href="https://www.facebook.com"` instead of `href="www.facebook.com"`. – Modi Mohammed Aug 12 '20 at 12:57
  • @mplungjan @ModiMohammed User is entering url in text editor `react-quil` on admin site. how can i add protocol myself? – billal Aug 12 '20 at 13:07

1 Answers1

1

Something like Detect URLs in text with JavaScript

function urlify(text) {
    var urlRegex = /(((https?:\/\/)|(www\.))[^\s]+)/g;
    return text.replace(urlRegex, function(url,b,c) {
        return url2 = (c == 'www.') ?  'https://' +url : url;
    }) 
}

console.log(urlify(`description: "<p><a href="www.facebook.com" rel="noopener noreferrer"`))

or just give an error message if there is a link and the link href does not start with https?\:\/\/

mplungjan
  • 169,008
  • 28
  • 173
  • 236