如何在 Vue 模板内的 Moment.js 格式化程序上转义 HTML 字符串？

Posted 2023-02-22

【中文标题】如何在 Vue 模板内的 Moment.js 格式化程序上转义 HTML 字符串？

【英文标题】：How to escape HTML string on Moment.js formatter inside Vue template?

【发布时间】：2019-07-16 16:31:40

【问题描述】：

假设我有一个过滤为February 22nd 2019 的当前日期。我希望 nd 符号位于 <sup class="small"></sup> 标记内。问题是，我同时使用 Vue 和 Moment.js。

在 php 中，我可以这样做：

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

但是如何在 javascript 和 Vue 中做到这一点？或者也许有更清洁的方法可以做到这一点？请看一下我的脚本..

<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>

【问题讨论】：

Vue display unescaped html的可能重复

【参考方案1】：

我相信您必须为此使用v-html。因此，您需要 filterCurrentDate 从 Moment 文本生成 HTML，然后使用 v-html 按原样呈现。

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

请注意，我更改了过滤器的名称以明确表示它返回 HTML。

对于filterCurrentDateHTML，也许：

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')`

【讨论】：

它在+ 签名后给了我unexpected token: $ord.replace(/\d/+, '')，先生

@DonnyPratama - 呵呵，+ 是不正确的。 :-) 那条线上还有另一个错误。我已经更新了答案，希望这些是那里仅有的两个错误。

谢谢您，先生，它有效，我只想通知您，在$m.format('Y') 之后还有一个额外的) 也会产生错误

好吧，我不能再在v-html 上使用过滤器，所以我将它移到methods 属性并像<h1 v-html="filterCurrentDateHTML(currentDate)"></h1> 一样使用它。是的，它可以在没有 span

的情况下工作

@Styx - 是的，我考虑过这一点，然后决定允许具有不同长度序数的语言环境。 （但不允许数字与非数字的东西不起作用的语言环境，所以......可能不一致。:-)）