# Can we replace a pattern, for ex: {{pattern}} anywhere in the visual editor or typed by the user in an input or paragraph with custom html or javascript

**URL:** <https://forum.builder.io/t/can-we-replace-a-pattern-for-ex-pattern-anywhere-in-the-visual-editor-or-typed-by-the-user-in-an-input-or-paragraph-with-custom-html-or-javascript/6356>\
**Category:** Technical Questions\
**Created:** [September 11, 2024, 8:17pm UTC](https://forum.builder.io/t/can-we-replace-a-pattern-for-ex-pattern-anywhere-in-the-visual-editor-or-typed-by-the-user-in-an-input-or-paragraph-with-custom-html-or-javascript/6356 "2024-09-11T20:17:39Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![soumya](https://avatars.discourse-cdn.com/v4/letter/s/ea5d25/32.png) [@soumya](https://forum.builder.io/u/soumya)\
**Post date:** [September 11, 2024, 8:17pm UTC](https://forum.builder.io/t/can-we-replace-a-pattern-for-ex-pattern-anywhere-in-the-visual-editor-or-typed-by-the-user-in-an-input-or-paragraph-with-custom-html-or-javascript/6356/1 "2024-09-11T20:17:40Z")

</div>

Can we replace a pattern, for ex: {{pattern}} anywhere in the visual editor or typed by the user in an input or paragraph with any HTML / javascript code which we need to add via Plugin?

---

<div class="post-metadata">

**Author:** ![alexander](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/alexander/32/4948_2.png) [@alexander](https://forum.builder.io/u/alexander)\
**Post date:** [September 12, 2024, 10:28am UTC](https://forum.builder.io/t/can-we-replace-a-pattern-for-ex-pattern-anywhere-in-the-visual-editor-or-typed-by-the-user-in-an-input-or-paragraph-with-custom-html-or-javascript/6356/2 "2024-09-12T10:28:51Z")

</div>

Hi Soumya,

As for replacing any text on the page, you can use regex for this.  
Take a look at this javascript code:  
`document.body.innerHTML = document.body.innerHTML.replace(/lorem/g, 'ipsum');`

which changes all occurrences of _lorem_ to _ipsum_

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/0/0fd7d8bd464863e89f41878f26ba08f66855b412.png)

Refer to our docs on [how to add custom code to your page](https://www.builder.io/c/docs/guides/custom-code#custom-code-in-the-visual-editor)

If there’s something more specific you want to do within the visual editor, please provide some more details (such as an example of what you want to do) so I can assist.

---

<div class="post-metadata">

**Author:** ![soumya](https://avatars.discourse-cdn.com/v4/letter/s/ea5d25/32.png) [@soumya](https://forum.builder.io/u/soumya)\
**Post date:** [September 12, 2024, 4:44pm UTC](https://forum.builder.io/t/can-we-replace-a-pattern-for-ex-pattern-anywhere-in-the-visual-editor-or-typed-by-the-user-in-an-input-or-paragraph-with-custom-html-or-javascript/6356/3 "2024-09-12T16:44:45Z")

</div>

Thanks, but i was looking for some Builder code/api which could do this, i.e allow me to execute function and transform the text/content.

---

<div class="post-metadata">

**Author:** ![alexander](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/alexander/32/4948_2.png) [@alexander](https://forum.builder.io/u/alexander)\
**Post date:** [September 12, 2024, 6:20pm UTC](https://forum.builder.io/t/can-we-replace-a-pattern-for-ex-pattern-anywhere-in-the-visual-editor-or-typed-by-the-user-in-an-input-or-paragraph-with-custom-html-or-javascript/6356/4 "2024-09-12T18:20:15Z")

</div>

What do you mean by Builder code/api?

For the regex code I provided, you can use it directly in the editor, either by using a _code block_ or by using the _Add JS + CSS_, which are both Builder features. The link to the docs I shared provides some more details.

---

<div class="post-metadata">

**Author:** ![soumya](https://avatars.discourse-cdn.com/v4/letter/s/ea5d25/32.png) [@soumya](https://forum.builder.io/u/soumya)\
**Post date:** [September 13, 2024, 4:46pm UTC](https://forum.builder.io/t/can-we-replace-a-pattern-for-ex-pattern-anywhere-in-the-visual-editor-or-typed-by-the-user-in-an-input-or-paragraph-with-custom-html-or-javascript/6356/5 "2024-09-13T16:46:59Z")

</div>

> [@alexander](#):
>
> by using the _Add JS + CSS_, which are both Builder features. The link to the docs I shared provides some more details.

_Add JS + CSS_ has to be used in each page, i want something which i can execute for all page models / content.

---

<div class="post-metadata">

**Author:** ![alexander](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/alexander/32/4948_2.png) [@alexander](https://forum.builder.io/u/alexander)\
**Post date:** [September 16, 2024, 8:05am UTC](https://forum.builder.io/t/can-we-replace-a-pattern-for-ex-pattern-anywhere-in-the-visual-editor-or-typed-by-the-user-in-an-input-or-paragraph-with-custom-html-or-javascript/6356/6 "2024-09-16T08:05:35Z")

</div>

Ah, I see. In that case, you might want to create your own Builder plugin. You would first need to create the plugin file and then use the Builder SDK to define and register it.

You can look at the docs on action shortcut plugins here: [Intro to contributing plugins - Builder.io](https://www.builder.io/c/docs/contributing-plugins#action-shortcut-plugins)

Be sure to check out the example repo linked in that doc. If you need help with any steps, let me know 👍