Change a special character in a tag

JavaScript
1

Using a booking calendar, a WordPress plugin. Excellent, but for one thing: when an event with a time span (e.g. starts 13:00 and ends 16:00) the output shows a / (forward slash) instead of a - (hyphen) between the two times, like this: 13:00 / 16:00 which makes some people think that the event starts twice.

Been searching through the calendar’s files to find where this slash is inserted, but can’t find it. So, I’m setting my hopes to jQuery or regex or whatever to change the character.
I’s just one specific tag with a special css-class that holds the character.

But I haven’t a clue how to do this. Can someone here help out?

2

What is the name of the plugin and do you have a site somewhere we can check what it is outputting?

As you can imagine your question boils down to “I have this thing, over on this website, that is doing this slash instead of a hyphen, can you help?” :wink:

3

Yeah, I know that my way of asking might not be perfect. Sorry. I’m just frustrated and English isn’t my mother tongue.
The plug is this: https://codecanyon.net/item/wordpress-pro-event-calendar/2485867 and there’s no way to get in touch with the developer.
My site is still just local.

4

I just need a way to replace this slash with a hyphen. I know (as I’ve heard) that it’s easily (?) fixed with javascript. I simply haven’t a clue how to do it.

5

Sure no problem. Just remember when asking for help it is always good to provide as many details as possible. We are often coming into the situation not knowing anything about your situation and details help us quickly find the issue and not waste your time or ours.

Oh doing a replace is often very easy. The harder part is locating everywhere it needs to be switched at. One reason I was asking about the plugin is that sometimes there are ways to just write a line of code on a plugin hook known as a “filter” and boom, instant replace.

Since this plugin is a paid for plugin and can’t see the code without buying, it will be a bit harder to find the place to change.

What I need you to do is the following…

  1. Load up a page in your local environment where it shows the forward slash instead of the hyphen.
  2. Right click the page in your browser and go to “view source”.
  3. Locate in the source where you see that forward slash you want to replace.
  4. Copy the entire tag that the code is in and perhaps a few of its parent tags. One of these tags will probably have a property called class or id. We want to find one of these and from there we can craft some javascript that will help you replace the character.
  5. Paste that code here on our forum (make sure to use the ‘preformatted text’ button in the editor. That is the one that looks like </>.

Hopefully after you have done this, we can see your code and can help you write the javascript replacement. :slight_smile:

2 Likes
6

Thanks a mill for reply! The source code (with tags) looks like this:<span class="dp_pec_date_time"><i class="fa fa-clock-o"></i>18:00 / 20:00</span> I need that forward slash to be replaced with a hyphen.

7

Ok well one way you can do this is by writing this function in JavaScript…

function replaceSlash() {
  let pec_date_times = document.querySelectorAll('.dp_pec_date_time');
  if (pec_date_times) {
    for (let i = 0; i < pec_date_times.length; i++) {
      pec_date_times[i].innerHTML = pec_date_times[i].innerHTML.replace(/\s\/\s/, ' - ');
    }
  }
}

When you call this function it will locate all the elements with the class dp_pec_date_time and then for each one of these elements it will read the HTML in it and replace the ' / ' with - . Of course to make sure to call this function after your page elements have fully loaded. So in other words, place it down just before you closing </body> tag. That way it can see it.

Need a fiddle?

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.