Javascript write regular expression to substitute http with html tag

Question

How do I make this string text

first video link: https://www.youtube.com/watch?v=123456

second video link: https://www.youtube.com/watch?v=8123123`;

become

first video link: 
<a href="https://www.youtube.com/watch?v=123456">
  https://www.youtube.com/watch?v=123456
</a>

second video link: 
<a href="https://www.youtube.com/watch?v=8123123">
  https://www.youtube.com/watch?v=8123123
</a>

I have written a regular expression to parse the link

Here is what I have.

<script type="text/javascript">
var myString =`first video link: https://www.youtube.com/watch?v=123456
second video link: https://www.youtube.com/watch?v=8123123`; 
var myRegexp = /(https|http)?:\/\/[\S]+/g;
var match = myRegexp.exec(myString);
console.log(match[0]) // https://www.youtube.com/watch?v=123456
</script>

What a strange dupe was chosen by the community script. The problem here is not *matching*, but *replacing*. — Wiktor Stribiżew, Mar 22 '17 at 23:45
Sorry, I don't know I need to use `replacing` instead of `matching` — rj487, Mar 23 '17 at 10:28

Wiktor Stribiżew · Accepted Answer · 2017-03-22T08:17:56.433

Use the following solution:

var myString = "first video link: https://www.youtube.com/watch?v=123456\nsecond video link: https://www.youtube.com/watch?v=8123123"; 
var myRegexp = /https?:\/\/\S+/g;
var match = myString.replace(myRegexp, '<a href="$&"><br>  $&<br></a>');
document.body.innerHTML = match;

The https?:\/\/\S+ will match http, then an optional s, then ://, and then \S+ will match one or more non-whitespace symbols. The whole match value can be inserted into the resulting string within a String#replace() replacement pattern via a $& backreference.

score 0 · Answer 2 · edited May 23 '17 at 12:32

0

See retrieve all matches for a regular expression for details on how to access all matches of myRegexp. Your sample code looks like string processing, your problem might be addressed correctly by working on elements of a source html-document or by processing a string and contribute the result into a document.

document.createElement('a').href=match[0];

Hint: Your regex (/(https|http)?://[\S]+/g) does match "://not.an.url" as well. either just mark the 's' of "https" an optional, or include "://" to the optional protocol part of your expression.

edited May 23 '17 at 12:32

Community

1
1

answered Mar 22 '17 at 08:12

TorfDrottel WMD

26
4

Why see the linked post if OP needs to *substitute* a string? It is not about *matching*, it is about *replacing*. – Wiktor Stribiżew Mar 22 '17 at 08:16

Javascript write regular expression to substitute http with html tag

2 Answers2