How to set hyperlink dynamically from inputted text in angular2 and make it clickable with url?

Question

In my angular component,

  <div contentEditable="true"  id="mytext" ></div>
  <button type="button" (click)="goSee()">SEE ME !</button>

In class,there is goSee() method because I want to change selected text(later url) to a real clickable href.

goSee()
     {
  var startIndex = window.getSelection().getRangeAt(0).startOffset;
  var endIndex = window.getSelection().getRangeAt(0).endOffset;
  var slicedText = document.getElementById("mytext").innerText.slice(startIndex, endIndex);
   document.getElementById("mytext").innerHTML.anchor(slicedText);

    }

Entering url to "mytext" and selectedText works,,But NO hyperlink and clickable link appears .... Please Suggest me and Thank you all in advance..

document.getElementById("mytext").innerHTML = document.getElementById("mytext").innerHTML.anchor(slicedText); ? — Max Koretskyi
– Max Koretskyi, Commented Nov 23, 2016 at 15:51

Max Koretskyi · Accepted Answer · 2016-11-23 16:02:10Z

2

First, you have to use link method to create anchor with the href attribute. Second, innerHTML is a property and you have to set it. Assuming that slicedText is a url you want to put into href attribute, you can achieve what you're trying to do like this:

var existingLinkText = document.getElementById("mytext").innerHTML;
document.getElementById("mytext").innerHTML = existingLinkText.link(slicedText);

Also, if your template is part of the component's template, I would suggest to use ElementRef to get access to the DOM instead of global document.

edited Nov 23, 2016 at 16:02

answered Nov 23, 2016 at 15:56

Max Koretskyi

106k69 gold badges357 silver badges525 bronze badges

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

4 Comments

KyiLis Over a year ago

It works and display likes a hyperlink !! But when slicedText is url like 'www.google.com' ,it goes 'www.google.com' from my prj like 'localhost:8080/Prj/www.google.com' ..Doesnt go just 'www.google.com' !

Max Koretskyi Over a year ago

this is a different question. you need to have a href starting with http:// for you browser to treat it like a link to a different resoure, rather than a relative link. you can mark this answer as accepted if it answers your question and ask another question for specific details of your second question. put a link to the other question here.

Max Koretskyi Over a year ago

but before read this and this

KyiLis Over a year ago

Thank you Maximus .. I realize more of href .. : )

Collectives™ on Stack Overflow

How to set hyperlink dynamically from inputted text in angular2 and make it clickable with url?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related