# Replace text with more than just links?

**URL:** https://meta.discourse.org/t/replace-text-with-more-than-just-links/305672
**Category:** Feature
**Tags:** completed, watched-words
**Created:** [April 27, 2024, 7:52am UTC](https://meta.discourse.org/t/replace-text-with-more-than-just-links/305672 "2024-04-27T07:52:19Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![Shauny](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/shauny/32/362012_2.png) [@Shauny](https://meta.discourse.org/u/Shauny)
#### Post date: [April 27, 2024, 7:52am UTC](https://meta.discourse.org/t/replace-text-with-more-than-just-links/305672/1 "2024-04-27T07:52:19Z")

</div>

I know you can easily set it to replace text with links, but I’d like to replace text with some custom HTML that will highlight and underline some text and include “title” tags.

The reason some people on our forums use [tone indicators](https://toneindicators.carrd.co/), but for new people they need explaining a lot. If I could have an abbr tag wrapped around them with a title tag explaining what it means and a link to the list, that would be perfect.

Is this possible? Would it require a theme component? I have no idea how to make one of those.

---

<div class="post-metadata">

### Author: ![zogstrip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zogstrip/32/512781_2.png) [@zogstrip](https://meta.discourse.org/u/zogstrip)
#### Post date: [April 27, 2024, 8:02am UTC](https://meta.discourse.org/t/replace-text-with-more-than-just-links/305672/2 "2024-04-27T08:02:45Z")

</div>

You could setup [Watched Words](https://meta.discourse.org/t/watched-words-reference-guide/241735) to automatically replace those tone indicators with an `<a href=“ https://toneindicators.carrd.co/#masterlist”><abbr title=“Joking”>/j</abbr></a>` for example?

---

<div class="post-metadata">

### Author: ![Shauny](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/shauny/32/362012_2.png) [@Shauny](https://meta.discourse.org/u/Shauny)
#### Post date: [April 27, 2024, 8:10am UTC](https://meta.discourse.org/t/replace-text-with-more-than-just-links/305672/3 "2024-04-27T08:10:40Z")

</div>

Oh can you do that? I thought you could only replace with links or words, not HTML. I will try it thank you!

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [April 27, 2024, 8:13am UTC](https://meta.discourse.org/t/replace-text-with-more-than-just-links/305672/4 "2024-04-27T08:13:08Z")

</div>

Oh, wow, didn’t realise quite how flexible that feature was!

---

<div class="post-metadata">

### Author: ![Shauny](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/shauny/32/362012_2.png) [@Shauny](https://meta.discourse.org/u/Shauny)
#### Post date: [April 27, 2024, 8:13am UTC](https://meta.discourse.org/t/replace-text-with-more-than-just-links/305672/5 "2024-04-27T08:13:17Z")

</div>

Hmm it didn’t work

 ![IMG_7418](https://global.discourse-cdn.com/meta/original/4X/2/5/b/25b9e75cdb0d2246e26d0d0cb260eff5463b4d07.jpeg)

---

<div class="post-metadata">

### Author: ![MarcP](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/marcp/32/160184_2.png) [@MarcP](https://meta.discourse.org/u/MarcP)
#### Post date: [April 27, 2024, 12:13pm UTC](https://meta.discourse.org/t/replace-text-with-more-than-just-links/305672/6 "2024-04-27T12:13:44Z")

</div>

I believe Markdown & HTML do not work with Watched Words:

> [@Allowing Markdown when replacing in Watched Words](https://meta.discourse.org/t/replacing-watched-words-with-markdown-doesnt-render-the-markdown/272014/2):
>
> I can repro. Markdown and HTML as well aren’t parsed in replacement strings.

---

<div class="post-metadata">

### Author: ![Shauny](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/shauny/32/362012_2.png) [@Shauny](https://meta.discourse.org/u/Shauny)
#### Post date: [April 27, 2024, 12:50pm UTC](https://meta.discourse.org/t/replace-text-with-more-than-just-links/305672/7 "2024-04-27T12:50:22Z")

</div>

Ok so is there any other way to do this please? 🙏

---

<div class="post-metadata">

### Author: ![zogstrip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zogstrip/32/512781_2.png) [@zogstrip](https://meta.discourse.org/u/zogstrip)
#### Post date: [April 27, 2024, 2:12pm UTC](https://meta.discourse.org/t/replace-text-with-more-than-just-links/305672/8 "2024-04-27T14:12:13Z")

</div>

Well, that’s awkward. I guess I shouldn’t reply on meta before my morning coffee 😅

Will have a look if it’s an easy fix / addition.

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [April 27, 2024, 2:58pm UTC](https://meta.discourse.org/t/replace-text-with-more-than-just-links/305672/10 "2024-04-27T14:58:34Z")

</div>

As an alternative, you have two theme components:

- [Add \<abbr\> tags to words in posts](https://meta.discourse.org/t/add-abbr-tags-to-words-in-posts/88394) – it replaces words with `<abbr>` HTML tag.  

- [GitHub - Arkshine/discourse-tooltipify-words · GitHub](https://github.com/Arkshine/discourse-tooltipify-words) – Something I did some time ago for someone. it’s a copy of [Auto-Linkify Words](https://meta.discourse.org/t/linkify-words/82193) but relying on `<DTooltip>` component so we can use HTML in it. You can regular expressions.

---

<div class="post-metadata">

### Author: ![Shauny](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/shauny/32/362012_2.png) [@Shauny](https://meta.discourse.org/u/Shauny)
#### Post date: [April 27, 2024, 3:34pm UTC](https://meta.discourse.org/t/replace-text-with-more-than-just-links/305672/11 "2024-04-27T15:34:53Z")

</div>

The second one is what I’m looking for, thank you so much!

---

<div class="post-metadata">

### Author: ![Shauny](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/shauny/32/362012_2.png) [@Shauny](https://meta.discourse.org/u/Shauny)
#### Post date: [April 27, 2024, 3:52pm UTC](https://meta.discourse.org/t/replace-text-with-more-than-just-links/305672/12 "2024-04-27T15:52:16Z")

</div>

Hmmm it doesn’t quite work, there are 2 issues:

1. The URL doesn’t work, it tries to load the page as part of my forum.
2. Clicking it on mobile doesn’t make the popup show, it just flickers in and out of view

😔

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [April 27, 2024, 3:58pm UTC](https://meta.discourse.org/t/replace-text-with-more-than-just-links/305672/13 "2024-04-27T15:58:04Z")

</div>

> [@Shauny](#):
>
> The URL doesn’t work, it tries to load the page as part of my forum

You need to add `target="_blank"` inside the `<a>` element.

> [@Shauny](#):
>
> Clicking it on mobile doesn’t make the popup show, it just flickers in and out of view

Let me test that.

EDIT: A long press on it displays the tooltip but seems to display the selection toolbar as well. I’m checking if I’m missing something.

---

<div class="post-metadata">

### Author: ![Shauny](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/shauny/32/362012_2.png) [@Shauny](https://meta.discourse.org/u/Shauny)
#### Post date: [April 27, 2024, 4:57pm UTC](https://meta.discourse.org/t/replace-text-with-more-than-just-links/305672/14 "2024-04-27T16:57:54Z")

</div>

Long press doesn’t work for me. I’m on an iPhone. It just goes crazy but if you tap it lots of times it eventually stays open.

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [April 27, 2024, 5:18pm UTC](https://meta.discourse.org/t/replace-text-with-more-than-just-links/305672/15 "2024-04-27T17:18:45Z")

</div>

@Shauny Update the component and see if it helps.

---

<div class="post-metadata">

### Author: ![Shauny](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/shauny/32/362012_2.png) [@Shauny](https://meta.discourse.org/u/Shauny)
#### Post date: [April 27, 2024, 8:34pm UTC](https://meta.discourse.org/t/replace-text-with-more-than-just-links/305672/16 "2024-04-27T20:34:19Z")

</div>

Yes that’s better thanks, long pressing does work. I do wonder if it’s possible to have it work with normal taps though as I don’t know if people would figure that out on their own!

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [April 27, 2024, 9:25pm UTC](https://meta.discourse.org/t/replace-text-with-more-than-just-links/305672/17 "2024-04-27T21:25:51Z")

</div>

Can you try the latest version? It “should” work with one tap on mobile now.

---

<div class="post-metadata">

### Author: ![Shauny](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/shauny/32/362012_2.png) [@Shauny](https://meta.discourse.org/u/Shauny)
#### Post date: [April 28, 2024, 5:31am UTC](https://meta.discourse.org/t/replace-text-with-more-than-just-links/305672/18 "2024-04-28T05:31:53Z")

</div>

Doesn’t work at all now :-/

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [April 28, 2024, 12:26pm UTC](https://meta.discourse.org/t/replace-text-with-more-than-just-links/305672/19 "2024-04-28T12:26:48Z")

</div>

Indeed. I could not test on a real mobile device, only a desktop (mobile view). Let me see how I can fix it.

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [April 28, 2024, 3:07pm UTC](https://meta.discourse.org/t/replace-text-with-more-than-just-links/305672/20 "2024-04-28T15:07:18Z")

</div>

Actually, it works. I tested it on a production Discourse instance with a mobile, but it relies on a feature introduced recently (3 weeks ago, [#23071](https://github.com/discourse/discourse/pull/23071)). You will have to upgrade your Discourse to make it work.

---

<div class="post-metadata">

### Author: ![Shauny](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/shauny/32/362012_2.png) [@Shauny](https://meta.discourse.org/u/Shauny)
#### Post date: [April 28, 2024, 6:48pm UTC](https://meta.discourse.org/t/replace-text-with-more-than-just-links/305672/21 "2024-04-28T18:48:54Z")

</div>

Ah ok. I’m on the stable release. I don’t plan to move to the beta just for this. I guess I will have to wait 😢

[Next page](https://meta.discourse.org/t/replace-text-with-more-than-just-links/305672.md?page=2)
