1

I have a linkify url text which is in chat message which O needs to allow even <x x> after a valid url. Now when I am using any string after url, it ends up with

InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('x<') is not a valid name.

This should allow

  1. before & after strings Ex: Hi this is test page https://www.test.com as well

Code

sendUrlText(e) {
    if (e && e.keyCode && e.keyCode !== 13) return;
    var stateMessage = unescape(this.state.message);

    function linkify(stateMessage){
        return stateMessage.replace(/(https?:\/\/[^\s]+)/g, "<a href='$1' target='_blank'>$1</a>")
    }
    var formattedMessage = linkify(stateMessage); 
}

Any suggestion how can I allow /< x x > after url and turns it into For example: enter image description here

with a linkify url.

Mark Rotteveel
  • 100,966
  • 191
  • 140
  • 197
Tammy
  • 1,122
  • 5
  • 19
  • 50
  • 2
    Please click edit, then `[<>]` snippet editor and create a [mcve] so we can see how you pass `` as state message – mplungjan Mar 22 '21 at 07:14
  • 2
    Please post the HTML of the expected result instead of as an image - and if is an example, please post a relevant example – mplungjan Mar 22 '21 at 07:24
  • 1
    Please post a relevant example. We cannot GUESS that `https://www.test.com/` needs to be ` – mplungjan Mar 22 '21 at 08:04
  • @mplungjan My bad. sorry – Tammy Mar 22 '21 at 08:05
  • So the answer is: We CANNOT extract a URL from text where there is no puntuation or whitespace AFTER the URL. We can extract from `This is a link: https://www.test.com/ in a sentence` but not `This is a link: -->https://www.test.com/<-- see the link` – mplungjan Mar 22 '21 at 08:08
  • My current regex is working fine for other cases like extracting test before or after the link . I have the issue that i cannot able to post it with ` – Tammy Mar 22 '21 at 08:11
  • Your first script is getting me that `https://www.test.com/ have a look` – Tammy Mar 22 '21 at 08:12

1 Answers1

1

You mean like this?

function linkify(stateMessage) {
  const string = stateMessage.match(/(https?:\/\/[^ ]*)/);
  if (!string) return ""
  const url = new URL(string[1])  
  return  stateMessage.replace(string[1],`<a href='${url.toString()}' target='_blank'>${url.toString()}</a>`)
}

const link = linkify('Hello, this is a link https://www.test.com/ with a space and valid text') 
console.log(link)
document.getElementById("urlOutput").innerHTML = link;
<span id="urlOutput"></span>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
  • Hi mplungjan thank you for your time but i just want to display as it is like https://www.test.com/ without to be linked – Tammy Mar 22 '21 at 07:20
  • I am not sure what you mean. Have a look at updated code. You need in comments to post links in `\`` backticks for me to see what you mean – mplungjan Mar 22 '21 at 07:21
  • See updated answer – mplungjan Mar 22 '21 at 07:34
  • your first answer is working for me but its failing when I am using with Ex: `hii this is https://www.test.com` . This comes with error of `TypeError: Failed to construct 'URL': Invalid URL` – Tammy Mar 22 '21 at 07:56
  • See update to second script which will ignore the pathname from the string passed – mplungjan Mar 22 '21 at 08:01
  • I updated the answer according to what I understand – mplungjan Mar 22 '21 at 09:43
  • I just try with this . It almost get me there . `hii https://www.test.com/%3Cx x>` in text message. I want this to be `hii https://www.test.com/` – Tammy Mar 22 '21 at 09:47
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/230221/discussion-between-tammy-and-mplungjan). – Tammy Mar 22 '21 at 09:51