LINUX.ORG.RU

Часть строки как html

 


0

1

Здрасти
Есть vue...есть я... На этом можно было бы закончить ))

Есть шаблон, есть строка с текстом в которой есть подстрока с кодом смайлика, ну папримен :ugly:
В шаблон я разумеется хочу вставить эту строку {{mess}}. Хочу я также взять и заменить в этой строке код смайла на картинку. Вроде все тривиально, 6аписал регекс и хлоп - все. Так и есть, но вуй при вставке переменной экранизирует <img/>

Понятно, что я знаю про v-html и про вставку <component is>, но вот в чем затык, в строке могут быть другие теги(собственно это пользовательские данные) и их нужно экранировать. Но не можно экранировать мои <img>

На ум приходит только предварительно экранизировать всю строку самому (может в вуе есть функция?), потом парсить смайлы и прочее и уже готовую строку впендюривать в v-html

Может есть более лаконичный способ. Задача вроде типичная. Ну не разбивать же строку на компоненты.

Пример строки

Пнивет всем :ugly: я вася пупкин <script>alert("xss")</script>


Что хочу
Пнивет всем <img src="/ugly.gif"/> я вася пупкин &lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;


Шаблон
<strong>{{nickname}}</strong>
<div>{{mess}}</div>

★★★★

Писать свой render:
https://v3.vuejs.org/guide/render-function.html
https://vuejs.org/v2/guide/render-function.html

Вариант номер два: vue/src/platforms/web/server/util.js

const ESC = {
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    '&': '&amp;',
};

function escapeChar (a) {
    return ESC[a] || a;
}

export function escape (s) {
    return s.replace(/[<>"&]/g, escapeChar);
}

byko3y ★★★ ()
Ответ на: комментарий от static_lab

вы че дикие чтоли?

const escapeHTML = s => s.replace(/</g, '&lt;').replace(/>/g, '&gt;')

const replaceGaymoji = s => ... // :smile: => <img src="">

//
export default {
  computed: {
     // <div class="message" v-html="formattedMessage" />
     formattedMessage() {
       return replaceGaymoji(escapeHTML(this.message))
     }
  }
}
tz4678 ★★ ()

Порежь свой mess сплитом /:(\w+):/, или как ты там самоопределяешься, в массив, потом <template v-for>’ом нечетные выводи как {{part}}, четные как <img :src=«`/${part}.gif`»>.

эксейпить итт

Дай человеку вменяемый шаблонизатор, нет, все равно будет жкверить и эскейпить свои наколеночные иксэсэсы до посинения.

anonymous ()