Javascript detect variable as Hyperlink and display it as a Link

Question

I have a variable in javascript returned by AJAX which may contain a simple string or a href code like <a href="www.example.com">EXAMPLE</a>. I have to detect whether it is a link or simple string and display accordingly.

i.e. if it is a link then a hyperLink is to be displayed with text as EXAMPLE or if it is a simple string then it has to be displayed as it is. I can able to do it in angular using

<span ng-bind-html-unsafe="name_of_variable">

How can I do it in javascript code with javascript variable?

Have you looked into how ng-bind-html-unsafe is implemented? — shapeshifter
– shapeshifter, Commented Aug 27, 2013 at 6:02
Just store the response in the .innerHTML of a span or div. If it's HTML, the browser will parse it and display it accordingly. If it's just plain text, it will be displayed as is. — Barmar
– Barmar, Commented Aug 27, 2013 at 6:05
you can have a regex function to find if thats a URL or a simple string and manipulate accordingly..if it is a URL you can add an anchor element dynamically say a = document.createElement('a'); a.href = 'google.com'; a.innerHTML = "Example" and append it to your div — Prasanna Aarthi
– Prasanna Aarthi, Commented Aug 27, 2013 at 6:07
@Barmar , can you please elaborate your answer with little code please. I am very new to javascript and angular :( — Satish Sharma
– Satish Sharma, Commented Aug 27, 2013 at 6:10

Barmar · Accepted Answer · 2013-08-27 11:00:57Z

1

If the variable data contains the response from AJAX, do:

document.getElementById('where_to_put_it').innerHTML = data;

If data looks like a hyperlink, the HTML will be parsed and it will be clickable. If it's plain text, it will just be put into the document that way.

Maybe something like this is what you're looking for with your calendar plugin:

var match = data.match(/<a\s+href=['"](.*?)['"]\s*>(.*?)<\/a>/i);
if (match) {
    event = { title: match[2],
              url: match[1]
            };
} else {
    event = { title: data };
}

edited Aug 27, 2013 at 11:00

answered Aug 27, 2013 at 6:16

Barmar

788k57 gold badges554 silver badges668 bronze badges

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

11 Comments

Satish Sharma Over a year ago

Not Working as I have a javascript variable and I have to show it on a Calendar plugin within javascript. So need some javascript code to format that variable if it is a hyper link.

Barmar Over a year ago

My point is that it already IS formatted as a hyperlink, if it's in the form <a href="URL">EXAMPLE</a>. How you get that into the calendar depends on the API of the plugin.

Satish Sharma Over a year ago

Simply the title attribute of Calendar plugin shows that variable value.

Barmar Over a year ago

But it probably treats it as a literal string, not HTML. So no amount of formatting will turn it into a link.

Satish Sharma Over a year ago

Yes @Barmar you are right this time....but that string has to be checked that it is a link or simple string and if it is a link then I have to extract its display text and has to show on title attribute on calendar.

|

Community · Accepted Answer · 2017-05-23 12:21:30Z

0

U need to check the string of data contains url , i believe think below url will help u out.. Check if a Javascript string is a url Regular Expression to find URLs in block of Text (Javascript) How to find if a text contains url string

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered Aug 27, 2013 at 6:05

codebreaker

1,4851 gold badge12 silver badges18 bronze badges

Collectives™ on Stack Overflow

Javascript detect variable as Hyperlink and display it as a Link

2 Answers 2

11 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

Comments

Linked

Related