JavaScript Regex - Splitting a string into an array by the Regex pattern

Question

Given an input field, I'm trying to use a regex to find all the URLs in the text fields and make them links. I want all the information to be retained, however.

So for example, I have an input of "http://google.com hello this is my content" -> I want to split that by the white space AFTER this regex pattern from another stack overflow question (regexp = /(ftp|http|https)://(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(/|/([\w#!:.?+=&%@!-/]))?/) so that I end up with an array of ['http://google.com', 'hello this is my content'].

Another ex: "hello this is my content http://yahoo.com testing testing http://google.com" -> arr of ['hello this is my content', 'http://yahoo.com', 'testing testing', 'http://google.com']

How can this be done? Any help is much appreciated!

(ftp|http|https)://\S+ is enough to get the url part

Bryan Chen
– Bryan Chen

2017-02-20 23:53:08 +00:00
Commented Feb 20, 2017 at 23:53 — Bryan Chen
– Bryan Chen, Commented Feb 20, 2017 at 23:53

ibrahim mahrir · Accepted Answer · 2017-02-21 00:04:22Z

1

First transform all the groups in your regular expression into non-capturing groups ((?:...)) and then wrap the whole regular expression inside a group, then use it to split the string like this:

var regex = /((?:ftp|http|https):\/\/(?:\w+:{0,1}\w*@)?(?:\S+)(?::[0-9]+)?(?:\/|\/(?:[\w#!:.?+=&%@!-/]))?)/;
var result = str.split(regex);

Example:

var str = "hello this is my content http://yahoo.com testing testing http://google.com";

var regex = /((?:ftp|http|https):\/\/(?:\w+:{0,1}\w*@)?(?:\S+)(?::[0-9]+)?(?:\/|\/(?:[\w#!:.?+=&%@!-/]))?)/;
var result = str.split(regex);

console.log(result);

edited Feb 21, 2017 at 0:04

answered Feb 20, 2017 at 23:53

ibrahim mahrir

31.8k5 gold badges50 silver badges78 bronze badges

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

1 Comment

Tonyhliu Over a year ago

Thanks! I ended up customizing it after using the regex you provided. thank you for your help @ibrahimmahrir

kind user · Accepted Answer · 2017-02-21 00:14:04Z

1

You had few unescaped backslashes in your RegExp.

var str = "hello this is my content http://yahoo.com testing testing http://google.com";
var captured = str.match(/(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!-/]))?/g);

var nonCaptured = [];
str.split(' ').map((v,i) => captured.indexOf(v) == -1 ? nonCaptured.push(v) : null);

console.log(nonCaptured, captured);

edited Feb 21, 2017 at 0:14

answered Feb 20, 2017 at 23:55

kind user

42k8 gold badges69 silver badges78 bronze badges

3 Comments

Tonyhliu Over a year ago

so this works for the url links i want but I also want to capture the non-regex content (i.e. "hello this is my content") into a separate array

Tonyhliu Over a year ago

forgot to tag you :) @kinduser

Tonyhliu Over a year ago

thanks! I ended up customizing it a bit after you provided me with the regex @kinduser

Collectives™ on Stack Overflow

JavaScript Regex - Splitting a string into an array by the Regex pattern

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related