How to format a string in JS?

Question

I am using an external api.

Some of the entry of the object looks like:

description : "Watch the full 12 minute film: https://vimeo.com/108679594\n\nPresented by Philips TV and Atomic Skis\nFeaturing: Pep Fujas, Eric Hjorleifson, Daron Rahlves, and Chris Benchetler\nMusic: First Aid Kit: 'My Silver Lining'\n\nFrom the depth of the creative visuals to the groundbreaking, never-been-done-before scale of the shoot, Afterglow is being hailed as one of the most cinematically profound ski movies ever made. Deep pillows and Alaskan spines, all filmed at night, with massive lights, custom made LED suits, and a national governments worth of logistics, planning, and civil engineering. \n\nFilmed as a partnership between Sweetgrass Productions, Philips TV, and the Swedish Agency Ahlstrand & Wållgren, it's two parts creativity, one part branded content, and a pinch of masochism for good measure."

I am trying to loop through the above string and replace all the \n with break line spaces. I also want to wrap all sentences beginning with http:// or https:// inside an <a> tag.

What I got so far:

function formatString(str) {
    str.replace(new RegExp('\r?\n','g'), '<br />');
    return str;
}

This works fine for replacing the \n with <br> but not sure how to proceed for the second part (wrapping into <a>).

Please note that since there are hundred of entries in the API, and this function has to format a lot of strings.

Your current `formatString` actually does nothing to the string. It makes the replacement, then lets the new string float away to garbage collection, returning the original string. — Patrick Roberts, Jun 28 '16 at 17:31
Use the CSS `white-space` property instead of opening yourself up to XSS vulnerabilities! http://stackoverflow.com/a/7602751/3140 — Jacob Krall, Jun 28 '16 at 17:32
please note that this is just a snippet of a bigger piece of code! — , Jun 28 '16 at 17:32
@Martinloc doesn't matter. Your replacement is not being stored anywhere, even if that is just a snippet. — Patrick Roberts, Jun 28 '16 at 17:33
@PatrickRoberts not sure what you mean? Replacing the white spaces works fine in my code, I am struggling with wrapping all piece of text starting with http or https into an tag... — , Jun 28 '16 at 17:34
@Martinloc no it doesn't: https://jsfiddle.net/patrob10114/32on7fs1/ — Patrick Roberts, Jun 28 '16 at 17:38

Sunny Patel · Accepted Answer · 2016-06-28T17:45:14.397

2

You would just tag on another replace regex for converting the links. Mathias Bynens - URL Regex is a great page to base your regular expression on (depending on how complex you want it to be).

function formatString(str) {
    return str.replace(/\r?\n/g, '<br />')
              .replace(/((https?|ftp):\/\/[^\s/$.?#].[^\s\\\<]*)/g, "<a href='$1'>$1</a>");
}

edited Jun 28 '16 at 17:45

answered Jun 28 '16 at 17:33

Sunny Patel

7,830
2
31
46

score 0 · Answer 2 · edited May 23 '17 at 10:29

First you need to extract a url from some random string.

This answer sums it up quite nicely. Regex might not be your first choice here, or is there a pattern you could follow in the description?

var description = "asdjipasd https://www.google.de/?client=safari#q=google+params&gfe_rd=cr\n\nsdasiojdas asijsadasd";

function findurl(input) {
  var sanitized = input.split(/\n/)[0];
  var matched = /http/.exec(sanitized).index;
  url = description.substring(matched, sanitized.length)
  return '<a href="'+url+'">link here</a>';
}

console.log(findurl(description));
//=> <a href="https://www.google.de/?client=safari#q=google+params&gfe_rd=cr">link here</a>

Obviously this requires your input to look more or less exactly like you have shown, having the url before the first \n.

Split the description by linebreak, use the first index of the returned array and match it against the beginning of a url pattern (http).

match returns an object with an index property that will allow you to select a substring from the index to the end of the 'sanitized' string.

boehm_s · Answer 3 · 2016-06-28T17:38:13.657

0

I think it's working :

str.replace(/http[s]?\:\/\/\S+/g, function(match, content, offset, s) {return '<a href="'+match+'">'+match+'</a>'})
   .replace(/\r?\n/g, "<br/>");

First replace match everything that starts with "http" or "https", pass it as the match variable in the callback. The return of the callback ('<a>'+match+'</a>') replace the match in the string.

Second replace is yours.

edited Jun 28 '16 at 17:38

answered Jun 28 '16 at 17:33

boehm_s

5,254
4
30
44

3

Please add some explanation of why this code helps the OP. This will help provide an answer future viewers can learn from. See [answer] for more information. – Heretic Monkey Jun 28 '16 at 17:34

How to format a string in JS?

3 Answers3