Title: Simulate shortcodes with javascript
Last modified: November 5, 2019

---

# Simulate shortcodes with javascript

 *  [giannit](https://wordpress.org/support/users/giannit/)
 * (@giannit)
 * [6 years, 6 months ago](https://wordpress.org/support/topic/simulate-shortcodes-with-javascript/)
 * Each post on my site starts with
 * `<p class=textbox><b>TOPIC</b> description</p>`
 * where `TOPIC` is the main argument of the post (usually 1 or 2 words), and `description`
   is a brief sentence explaining more about the content. This textbox is shown 
   in the excerpt of each post when searching for them using the search bar.
 * In some cases the description contains `<span class=boxed><b><font color=00CD00
   >V</font>|<font color=red>F</font></b></span>`, which I later replaced with the
   shortcode `[VF]`.
 * But now I found out that shortcodes are now shown in the post excerpts, so I 
   was thinking about a workaround with javascript: keep the notation `[VF]`, delete
   its shortcode definition, and finally add a javascript which replaces it with
   the html code of the original shortcode definition.
 * This is how the shortcode `[VF]` is actually defined
 *     ```
       function vf_sc( $atts ){
           return "<span class=boxed><b><font color=00CD00>V</font>|<font color=red>F</font></b></span>";
       }
       add_shortcode( 'VF', 'vf_sc' );
       ```
   
 * where the `boxed` class id defined as
 *     ```
       .boxed {
           padding: 0 5px;
           border: black 0.7px solid;
       }
       ```
   
 * Is it possibile to write a javascript which replaces the string `[VF]` with `
   <span class=boxed><b><font color=00CD00>V</font>|<font color=red>F</font></b>
   </span>`, so that even by deleting the definition of the shortcode, I can still
   write `[VF]` in the editor and obtain the same output?

Viewing 4 replies - 1 through 4 (of 4 total)

 *  Moderator [Steven Stern (sterndata)](https://wordpress.org/support/users/sterndata/)
 * (@sterndata)
 * Volunteer Forum Moderator
 * [6 years, 6 months ago](https://wordpress.org/support/topic/simulate-shortcodes-with-javascript/#post-12099570)
 * Is this a template you’ve written that calls `the_excerpt()`? If so, you might
   try changing that to `echo do_shortcode( get_the_excerpt() );`.
 *  [Joy](https://wordpress.org/support/users/joyously/)
 * (@joyously)
 * [6 years, 6 months ago](https://wordpress.org/support/topic/simulate-shortcodes-with-javascript/#post-12099735)
 * > But now I found out that shortcodes are now shown in the post excerpts
 * You should look into this first. In the code, you can see that the first thing
   done is to strip the shortcodes. This removes all registered shortcodes.
    [https://developer.wordpress.org/reference/functions/wp_trim_excerpt/](https://developer.wordpress.org/reference/functions/wp_trim_excerpt/)
 * If you don’t want to see the shortcode in the excerpt, you could do a Search/
   Replace in your database. You could also define manual excerpts. You could also
   make sure the shortcodes are expanded instead of stripped, before the excerpt
   is generated.
 *  Thread Starter [giannit](https://wordpress.org/support/users/giannit/)
 * (@giannit)
 * [6 years, 6 months ago](https://wordpress.org/support/topic/simulate-shortcodes-with-javascript/#post-12100328)
 * [@sterndata](https://wordpress.org/support/users/sterndata/) Thank you, I am 
   using the plugin Advanced Excerpt, I don’t have templates, instead I write the`
   <p class=textbox><b>TOPIC</b> description</p>` at the very beginning of each 
   post, and the plugin shows just that `<p>` and nothing else. That is, I don’t
   have to manually create the excerpts.
 * [@joyously](https://wordpress.org/support/users/joyously/) Thank you, I do want
   to see the shortcode in the excerpts. Since I have a hundreds of posts it is 
   handy to have a plugin (advanced excerpt) which automatically creates the excerpts.
 * I tried this javascript to replace the string `[VF]`, but it doesn’t work, why?
 *     ```
       function myFunction() {
         var str = document.getElementsByClassName("textbox")[0].innerHTML;
         var res = str.replace("[VF]", "test");
         document.getElementsByClassName("textbox")[0].innerHTML = res;
       }
       ```
   
 *  [Joy](https://wordpress.org/support/users/joyously/)
 * (@joyously)
 * [6 years, 6 months ago](https://wordpress.org/support/topic/simulate-shortcodes-with-javascript/#post-12100360)
 * I don’t know about your JS attempt, but I think it’s better to change it in PHP,
   before it gets to the browser.
    It is likely because of your plugin that you 
   are seeing the shortcodes at all, otherwise they would be stripped out. So you
   can change the plugin or use one of the other suggestions I gave before.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Simulate shortcodes with javascript’ is closed to new replies.

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 4 replies
 * 3 participants
 * Last reply from: [Joy](https://wordpress.org/support/users/joyously/)
 * Last activity: [6 years, 6 months ago](https://wordpress.org/support/topic/simulate-shortcodes-with-javascript/#post-12100360)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics
