# Auto-Linkify Words

**URL:** https://meta.discourse.org/t/auto-linkify-words/82193
**Category:** Theme component
**Tags:** official, linkify-words
**Created:** [March 5, 2018, 7:16am UTC](https://meta.discourse.org/t/auto-linkify-words/82193 "2018-03-05T07:16:06Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![Discourse](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/discourse/32/148734_2.png) [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [March 5, 2018, 7:16am UTC](https://meta.discourse.org/t/auto-linkify-words/82193/1 "2018-03-05T07:16:06Z")

</div>

> ❗Discourse has a built-in feature called `Watched Words` which can [replicate most of the features](https://meta.discourse.org/t/watched-words-reference-guide/241735) of this theme component. Consider using that before installing this theme component.

| | | |
| --- | --- | --- |
| :discourse2: | **Summary** | **Auto-Linkify Words** allows you to automatically hyperlink certain words or patterns in your post with the desired destination URL. |
| 🛠 | **Repository Link** | [https://github.com/discourse/discourse-linkify-words](https://github.com/discourse/discourse-linkify-words) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

Install this theme component

> [@](#):
>
> :discourse2: As this is an #official theme component maintained by the Discourse team, #Support, #Contribute > Bug, #Contribute > UX, and #Contribute > Feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started. 👍
> 
> [❓&nbsp; **Support**](https://meta.discourse.org/new-topic?category_id=6&tags=linkify-words "Ask for support on configuring and using Auto-Linkify Words") [🐛&nbsp; **Bug**](https://meta.discourse.org/new-topic?category_id=1&tags=linkify-words "A bug report means something is broken, preventing normal/typical use of the theme component") [👀&nbsp; **UX**](https://meta.discourse.org/new-topic?category_id=9&tags=linkify-words "Discussion about the user interface of Auto-Linkify Words, and how features are presented (including language and UI elements)") [💡&nbsp; **Feature**](https://meta.discourse.org/new-topic?category_id=2&tags=linkify-words "Discussion about how existing Auto-Linkify Words features can be improved or enhanced, and how proposed new features could work")

### Features

 ![image](https://global.discourse-cdn.com/meta/original/4X/5/4/b/54bebf2d9409c89f98beaed5d8c18ef52040c0ee.png)

### How to configure?

Configure the theme settings with the format

`WORD, https://destination.url.com`

or using regular expressions (in [JavaScript implementation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions)) with the format

`/regex/, https://destination.url.com`

One item per line

 ![theme_settings](https://global.discourse-cdn.com/meta/original/3X/f/a/faca3963ba4a7516483bb41a8b48e727ee60ab3d.png)

### Using regular expressions

With regular expressions, you can match a certain pattern to a single URL. This is useful for synonyms or for words which can take different forms in the sentence etc.

However, you can also generate the URL automatically based on what was matched. For example, let’s say you have a line of products, each with its own numeric id, and you want to autolink them to their own URLs. Using

`/product-([0-9]+)/, https://myshop.com/product/$1`

`product-42` will be autolinked to `https://myshop.com/product/42`  
Notice the capturing parentheses in the regular expression and the `$1` in the URL which is substituted by the match inside the parenthesis. You can also capture multiple parts of the string and use `$2`, `$3` and so on.

Regular expressions are by default case sensitive (unlike WORD’s which are case insensitive). However, you can change that by using a standard “i” modfier like this:

```
/foo/i, https://example.com

```

In this case, FOO, Foo or foo will all be matched.

### How this looks in action?

 ![image](https://global.discourse-cdn.com/meta/original/3X/c/d/cdfc07953a5ac569429a10a9fcdbc6ae897bd238.png)

### Limitations

- Replacement will only appear in the web UI and will not appear in emails.

### Settings

| Name | Description |
| --- | --- |
| linked words | |
| excluded tags | |
| excluded classes | |

### Credits

Big thanks to @Osama for building theme settings and [https://stackoverflow.com/questions/8949445/javascript-bookmarklet-to-replace-text-with-a-link](https://stackoverflow.com/questions/8949445/javascript-bookmarklet-to-replace-text-with-a-link) for guiding on the implementation.

  

> :discourse2: **Hosted by us?** Theme components are available to use on our Standard, Business, and Enterprise plans.

> Last edited by @JammyDodger 2024-06-13T12:57:47Z
> 
> > **Check document**
> >
> > Perform check on document:

---

<div class="post-metadata">

### Author: ![8BIT](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/8bit/32/76872_2.png) [@8BIT](https://meta.discourse.org/u/8BIT)
#### Post date: [March 5, 2018, 3:01pm UTC](https://meta.discourse.org/t/auto-linkify-words/82193/4 "2018-03-05T15:01:32Z")

</div>

fantastic, system-wide feature… was thinking about this just the other day!

---

<div class="post-metadata">

### Author: ![fellowshipforums](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fellowshipforums/32/93448_2.png) [@fellowshipforums](https://meta.discourse.org/u/fellowshipforums)
#### Post date: [March 6, 2018, 3:45am UTC](https://meta.discourse.org/t/auto-linkify-words/82193/5 "2018-03-06T03:45:18Z")

</div>

Hi

First off, I’d just like to thank everyone for all the help provided to me over the past few weeks. I know I’ve been asking lots of questions - I am also a beginner to Discourse and coding in general, and the community here has been incredible.

I am wondering if it would be possible to add on a feature to this, which is very similar in nature. I think most of the functionality is built, my use case for this is slightly different however.

Would it be possible to have a box like this on a ‘Tags’ page, where the user can type in specific tag words manually, and it would create a customized url based on these words? For example, the image below would produce a url something like this: [www.websitename.com/tags/word1/word2/word3](http://www.websitename.com/tags/word1/word2/word3). This would be a great feature for Tags Intersection, and would allow the user to specify the words in their intersection.

![image](https://global.discourse-cdn.com/meta/original/3X/c/7/c7650beed4f6dff7e0717b24bd363c68c2a168d2.png)

Thanks.

---

<div class="post-metadata">

### Author: ![8BIT](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/8bit/32/76872_2.png) [@8BIT](https://meta.discourse.org/u/8BIT)
#### Post date: [March 7, 2018, 6:36pm UTC](https://meta.discourse.org/t/auto-linkify-words/82193/6 "2018-03-07T18:36:48Z")

</div>

seems to be not showing when you add it to a theme:

 ![21%20AM](https://global.discourse-cdn.com/meta/original/3X/b/e/bee94dd85603c0702c75887c93f519b5ddb6c9b8.png)

tried adding to default… but doesn’t seem to be working as intended:

 ![56%20AM](https://global.discourse-cdn.com/meta/original/3X/f/1/f197f1d55521c813566d80fe3b04f3810cd59b9e.png)

 ![59%20AM](https://global.discourse-cdn.com/meta/original/3X/7/0/70edcd2c81a48ced5924d4c3de66ba3daa8d80e1.png)

---

<div class="post-metadata">

### Author: ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)
#### Post date: [March 7, 2018, 6:45pm UTC](https://meta.discourse.org/t/auto-linkify-words/82193/7 "2018-03-07T18:45:36Z")

</div>

It is not a problem related to this specific theme, see:

[https://meta.discourse.org/t/js-error-on-click-adding-a-theme-component/82313](https://meta.discourse.org/t/js-error-on-click-adding-a-theme-component/82313)

---

<div class="post-metadata">

### Author: ![southpaw](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/southpaw/32/79352_2.png) [@southpaw](https://meta.discourse.org/u/southpaw)
#### Post date: [March 8, 2018, 4:41am UTC](https://meta.discourse.org/t/auto-linkify-words/82193/8 "2018-03-08T04:41:12Z")

</div>

Sometimes one _like_ is not enough. ❤ Office high-fives took place today as we thought through all the ways we could put this to use!

One question, though: Is the following a bug?

Most of my links are working, however urls that include appended parameters are failing.

For example, I want to use this link:  
`https://republicwireless.com/shop/phones/moto-x4/?icid=phones-cta-forums-moto-x4-post`

but when it is created from linkified words, clicking it results in:  
`https://forums.republicwireless.com/clicks/track?url=%20https%3A%2F%2Frepublicwireless.com%2Fshop%2Fphones%2Fmoto-x4%2F%3Ficid%3Dphones-cta-forums-moto-x4-post&post_id=134361&topic_id=16863`

The same link added to a post traditionally (pasted, or using the “link” icon from the toolbar) works.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [March 8, 2018, 4:46am UTC](https://meta.discourse.org/t/auto-linkify-words/82193/10 "2018-03-08T04:46:14Z")

</div>

Looks like @zogstrip fixed this [FIX: don't track clicks · discourse/discourse-linkify-words@ef072b3 · GitHub](https://github.com/discourse/discourse-linkify-words/commit/ef072b380b81698d5d21811e2e2e723310fe058c) … I just updated your component, can your refresh the problem page and try again?

---

<div class="post-metadata">

### Author: ![southpaw](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/southpaw/32/79352_2.png) [@southpaw](https://meta.discourse.org/u/southpaw)
#### Post date: [March 8, 2018, 4:48am UTC](https://meta.discourse.org/t/auto-linkify-words/82193/12 "2018-03-08T04:48:44Z")

</div>

That appears to have fixed it! Thank you!!

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [March 8, 2018, 4:49am UTC](https://meta.discourse.org/t/auto-linkify-words/82193/13 "2018-03-08T04:49:50Z")

</div>

Keep in mind, we are going to elevate this to a proper feature in Discourse in the “special actions on words” section, but it will take a bit.

I love that this is a component though cause we get to “test out components” in anger. @Osama / @j.jaffeux one huge omission we have here is that it is ultra mega super painful working with long lists in settings, try this out with 50 or so links to experience the pain. We need a different “list” control for managing long lists of things.

---

<div class="post-metadata">

### Author: ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [March 8, 2018, 6:58am UTC](https://meta.discourse.org/t/auto-linkify-words/82193/14 "2018-03-08T06:58:16Z")

</div>

do you have any idea in mind about this?

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [March 8, 2018, 8:56am UTC](https://meta.discourse.org/t/auto-linkify-words/82193/15 "2018-03-08T08:56:02Z")

</div>

Honestly, I am not sure, but have a look at republic for an example of how painful this gets.

---

<div class="post-metadata">

### Author: ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [March 8, 2018, 9:19am UTC](https://meta.discourse.org/t/auto-linkify-words/82193/16 "2018-03-08T09:19:45Z")

</div>

Agreed it’s a massive pain…

A first step would be to give it more width, but that wouldn’t make it perfect.

What do you think if I hide the part after the comma, and you can only see it when mouse overing ?

 ![32](https://global.discourse-cdn.com/meta/original/3X/6/6/66ffe087fbaaae93cb20e9e2e5c232b03c942981.png)

I think that would be good, you mostly care about the words you are linkifying when you look at the list.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [March 8, 2018, 9:21am UTC](https://meta.discourse.org/t/auto-linkify-words/82193/17 "2018-03-08T09:21:54Z")

</div>

I kind of think it needs another mode of item per row, that way at least you can tell what is going on in long lists

---

<div class="post-metadata">

### Author: ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [March 8, 2018, 9:23am UTC](https://meta.discourse.org/t/auto-linkify-words/82193/18 "2018-03-08T09:23:59Z")

</div>

I see. Shouldn’t be hard to do, I already apply this kind of per multi-select modification for category colors, I have an idea, will work on it in the next days.

---

<div class="post-metadata">

### Author: ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [March 8, 2018, 10:20am UTC](https://meta.discourse.org/t/auto-linkify-words/82193/20 "2018-03-08T10:20:16Z")

</div>

Here is my proposal:

A new site-setting type: dictionary.

 ![29](https://global.discourse-cdn.com/meta/original/3X/5/4/5423ad08d7ccefca50ad4341dc84c83743b394fb.png)

- one item per row
- explicitly shows the key/value relation
- ellipsis the end of the value so it’s always readable
- will limit the height for the component so it becomes scrollable after something like 10 rows

If it works for you I will work on it beginning next week.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [March 8, 2018, 10:21am UTC](https://meta.discourse.org/t/auto-linkify-words/82193/21 "2018-03-08T10:21:22Z")

</div>

Do we have other site settings that need this?

---

<div class="post-metadata">

### Author: ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [March 8, 2018, 10:25am UTC](https://meta.discourse.org/t/auto-linkify-words/82193/22 "2018-03-08T10:25:48Z")

</div>

not to my knowledge, but AFAIK it doesn’t have to be an explicit new type server side, it could only be a new type client site like (url-list, host-list…)

So in the end it would be very little code, it’s mostly a subclass of list-setting where I split the label and present it differently.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [March 8, 2018, 10:33am UTC](https://meta.discourse.org/t/auto-linkify-words/82193/23 "2018-03-08T10:33:09Z")

</div>

We should split this topic

I feel there are a few settings that list urls like allowed iframes and some others that can easily benefit from item-per-row, maybe even the user list in admin groups as well

I think we should start with a simple item per row mode prior to adding dictionary

---

<div class="post-metadata">

### Author: ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [March 13, 2018, 10:47am UTC](https://meta.discourse.org/t/auto-linkify-words/82193/25 "2018-03-13T10:47:50Z")

</div>

After a discussion with sam:

- rename our current “list” to “compact-list”, which will display as many items per row it can (list current behavior)
- “list” will now only display one item per row
- this shouldn’t touch server side client setting, default UI for list will be modified, and the new client side site setting “compact-list” will rely on “list”

---

<div class="post-metadata">

### Author: ![iidbae](https://avatars.discourse-cdn.com/v4/letter/i/a183cd/32.png) [@iidbae](https://meta.discourse.org/u/iidbae)
#### Post date: [March 18, 2018, 7:31am UTC](https://meta.discourse.org/t/auto-linkify-words/82193/26 "2018-03-18T07:31:34Z")

</div>

I think, there is a missing step in configuring Linkify component.

After this

> [@sam](#):
>
> How to configure?  
> After importing the theme component, configure the theme settings with the format WORD,[https://destination.url.com](https://destination.url.com)

Then, activate the linkify components in every theme.

 ![activate-linkify-components](https://global.discourse-cdn.com/meta/original/3X/7/8/7884404a87e7d74f553bdf1eca1443cbd713206b.png)

I hope the last step should help others newbie like me.

I am certainly love this feature. ❤

[Next page](https://meta.discourse.org/t/auto-linkify-words/82193.md?page=2)
