How to escape HTML string on Moment.js formatter inside Vue template?

Question

Let's say I have a current date filtered to February 22nd 2019. I want the nd sign to be inside the <sup class="small"></sup> tag. The problem is, I'm using Vue and Moment.js at the same time.

In PHP, I could just do:

{!! Carbon\Carbon::today()->format('F d<\s\up \c\l\a\s\s\="\s\m\a\l\l\"\>S</\s\up> Y') !!}

but how can I do that in Javascript and Vue? Or maybe there is cleaner way to do so? Please take a look at my script..

<template>
    <div class="container">
        <!-- Textbox -->
        <div class="textbox text-white">
            <p>Realtime Flight Schedule</p>
            <div class="live-datetime">
                <h1>{{ currentDate | filterCurrentDate  }}</h1>
                <digi-clock></digi-clock>
            </div>
        </div>
        <!-- Flight table -->
        <flight-table></flight-table>
    </div>
</template>
<script>
import moment from 'moment'
export default {
    filters: {
        filterCurrentDate(date) {
            return moment(date).format("MMMMM Do Y")
        }
    },
    data() {
        return {
            currentDate: new Date(),
        }
    },
}
</script>

Possible duplicate of [*Vue display unescaped html*](https://stackoverflow.com/questions/30877491/vue-display-unescaped-html) — T.J. Crowder, Feb 22 '19 at 14:41

score 2 · Accepted Answer · edited Jul 15 '22 at 22:32

2

I believe you have to use v-html for that. So you'd have filterCurrentDate generate the HTML from the Moment text, and then use v-html to render that as-is.

<h1 v-html="filterCurrentDateHTML(currentDate)"></h1>

Note I changed the name of the filter to make it explicit that it returns HTML.

For filterCurrentDateHTML, perhaps:

const m = moment(date);
const ord = m.format("Do");
return `${m.format("MMMMM")} ${ord.replace(/\D/g, '')}<sup class="small">${ord.replace(/\d/g, '')}</sup> ${m.format('Y')}`

edited Jul 15 '22 at 22:32

tony19

125,647
18
229
307

answered Feb 22 '19 at 14:49

T.J. Crowder

1,031,962
187
1,923
1,875

it gave me `unexpected token: ${ord.replace(/\d/+, '')}` after `+` sign, sir – Yura Feb 22 '19 at 15:04
@DonnyPratama - Heh, as it would, that `+` is incorrect. :-) There was another error on that line as well. I've updated the answer, hopefully those are the only two errors there. – T.J. Crowder Feb 22 '19 at 15:06
1

Thank you sir, it works, and I just want to inform you that there is an extra `)` which produce error too after `${m.format('Y')}` – Yura Feb 22 '19 at 15:11
@DonnyPratama - Sorry about that. Eyes are getting tired. Of course, it's a return statement, not a function call. :-) – T.J. Crowder Feb 22 '19 at 15:14
@DonnyPratama - Since you have a handy test case: Does `v-html` work directly on `h1`, or do you need the `span`? – T.J. Crowder Feb 22 '19 at 15:15
1

well, I cannot use filter anymore on `v-html`, so I moved it to a `methods` property and use it like this `
`. Yes it works without `span` – Yura Feb 22 '19 at 15:19
Rather than using `.replace(...)`, you could use `.slice(0,-2)` and `.slice(-2)` respectively, as the suffix is always 2 chars. – Styx Feb 22 '19 at 16:17
1

@Styx - Yeah, I thought about that, then decided to allow for locales that had varying-length ordinals. (But not allowing for locales that where the digits vs. non-digits thing wouldn't work, so...possibly inconsistent. :-) ) – T.J. Crowder Feb 22 '19 at 16:21
@T.J.Crowder Yes, you're right, I didn't take that into consideration :) – Styx Feb 22 '19 at 16:27

How to escape HTML string on Moment.js formatter inside Vue template?

1 Answers1