# Linkification & link-to component

**URL:** <https://discuss.emberjs.com/t/linkification-link-to-component/8881>\
**Category:** Uncategorized\
**Created:** [September 30, 2015, 4:01pm UTC](https://discuss.emberjs.com/t/linkification-link-to-component/8881 "2015-09-30T16:01:51Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![bakerac4](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/bakerac4/32/10593_2.png) [@bakerac4](https://discuss.emberjs.com/u/bakerac4)\
**Post date:** [September 30, 2015, 4:01pm UTC](https://discuss.emberjs.com/t/linkification-link-to-component/8881/1 "2015-09-30T16:01:51Z")

</div>

I need to be able to linkify a hashtag by going through the content being sent from the server and replacing each hashtag to a url that points to our site. That was easy to do, but I need to have it insert a link-to component for each hashtag so that a full page refresh does not occur.

To give an example, lets say the content is “this is a #cool #ember post” I need to be able to turn that into

```
"this is a <a href="/hashtags/cool">#cool</a> <a href="/hashtags/ember">#ember</a> post"

```

Here is my helper.

```
import Ember from 'ember';

export function linkifyText(params, hash) {
    var regex = /(^|\W)(#[a-z\d][\w-]*)/ig;
    var text = params[0];

    text = text.replace(regex, function (hashtag) {
        hashtag = hashtag.trim();
        var word = hashtag.split('#')[1];
        return ' <a href="/hashtag/' + word + '">' + hashtag + '</a> ';
   });
   return Ember.String.htmlSafe(text);
}

export default Ember.Helper.helper(linkifyText);

```

This works but it causes a full page refresh because we are not using link-to components. Is there a way I can insert a link-to component in the helper for each hashtag?

Another option would be to turn this into a component and use actions on each link that then go to a action handler in the component, but I can’t seem to grasp how I would generate the html to add the actions.

---

<div class="post-metadata">

**Author:** ![varblob](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/varblob/32/10304_2.png) [@varblob](https://discuss.emberjs.com/u/varblob)\
**Post date:** [September 30, 2015, 10:16pm UTC](https://discuss.emberjs.com/t/linkification-link-to-component/8881/3 "2015-09-30T22:16:53Z")

</div>

First convert your text into

```
[
  { text: "chunk of text", isHash: false},
  { url: "/hashtags/cool", isHash: true }
]

```

then you can loop through in your template

```
{{#each tokens as |token|}}
  {{#if token.isHash}}{{link-to token.url}} {{else}} {{token.text }} {{/if}}
{{/each}}

```

---

<div class="post-metadata">

**Author:** ![bakerac4](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/bakerac4/32/10593_2.png) [@bakerac4](https://discuss.emberjs.com/u/bakerac4)\
**Post date:** [October 1, 2015, 1:26pm UTC](https://discuss.emberjs.com/t/linkification-link-to-component/8881/4 "2015-10-01T13:26:44Z")

</div>

So here is what I ended up doing. Thank you varblob for helping!

I created a component called ‘hashtag-linkify’.

```
import Ember from 'ember';

export default Ember.Component.extend({
    click: function(event) {
        var target = $(event.target),
            hashtagId = '';
        if (target.is('a')) {
            event.preventDefault();
            hashtagId = target.data('hashtag-word');
            this.get('router').transitionTo('hashtag', hashtagId);
        }
    }
});

```

with a template of

```
{{linkify-text text}}

```

that uses the helper from above (I also added a data attribute onto the ‘a’ tag) then just injected the router into that component . So if it reads its an ‘a’ tag which any hashtag gets turned into, it will take over and re-route appropriately.