1

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?

Rich
  • 5,603
  • 9
  • 39
  • 61
Satish Sharma
  • 3,284
  • 9
  • 38
  • 51
  • Have you looked into how ng-bind-html-unsafe is implemented? – shapeshifter Aug 27 '13 at 06:02
  • 2
    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 Aug 27 '13 at 06: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 Aug 27 '13 at 06:07
  • @Barmar , can you please elaborate your answer with little code please. I am very new to javascript and angular :( – Satish Sharma Aug 27 '13 at 06:10

2 Answers2

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 };
}
Barmar
  • 741,623
  • 53
  • 500
  • 612
  • 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. – Satish Sharma Aug 27 '13 at 07:21
  • My point is that it already IS formatted as a hyperlink, if it's in the form `EXAMPLE`. How you get that into the calendar depends on the API of the plugin. – Barmar Aug 27 '13 at 07:24
  • Simply the title attribute of Calendar plugin shows that variable value. – Satish Sharma Aug 27 '13 at 10:25
  • But it probably treats it as a literal string, not HTML. So no amount of formatting will turn it into a link. – Barmar Aug 27 '13 at 10:27
  • 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. – Satish Sharma Aug 27 '13 at 10:31
  • You don't understand. Unless the plugin provides a way to put a hyperlink in the title, you can't do it. – Barmar Aug 27 '13 at 10:37
  • Let's stop wasting time, can you post a link to the plugin? – Barmar Aug 27 '13 at 10:38
  • http://arshaw.com/fullcalendar/docs/mouse/eventClick/ you can check this link. I have used fullCalendar. – Satish Sharma Aug 27 '13 at 10:44
  • you can also see the actual UI of full Calendar that I have used here . http://arshaw.com/fullcalendar/views/month/ – Satish Sharma Aug 27 '13 at 10:45
  • According to http://arshaw.com/fullcalendar/docs/event_data/Event_Object/ the event has a URL property, that's where you're supposed to put the URL, not in the title. – Barmar Aug 27 '13 at 10:48
  • thanks for your code above. I have used match method of javascript as given by you. – Satish Sharma Aug 27 '13 at 12:16
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

Community
  • 1
  • 1
codebreaker
  • 1,465
  • 1
  • 12
  • 18