LINUX.ORG.RU
Форум — Web-development  

Часть строки как 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>

★★★★

Последнее исправление: gobot (всего исправлений: 1)

Что-то типа

'Пнивет всем :ugly: я вася пупкин <script>alert("xss")</script>'.replaceAll('"', '&quot;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replace(":", '<img src="/').replace(':', '.gif"/>')

?

fernandos ★★★
()
Последнее исправление: fernandos (всего исправлений: 1)
Ответ на: комментарий от fernandos

Ну да, это как последний вариант. Но хочется чего то более в стиле VUE что-ли.

gobot ★★★★
() автор топика
Ответ на: комментарий от fernandos

быдло().быдло().быдло().быдло()

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

Ммда...спасибо конечно, но первичный вопрос был был не как переводить в html сущности

gobot ★★★★
() автор топика
Ответ на: комментарий от 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 ★★
()
Ответ на: комментарий от tz4678

Это именно то, что предложил ТС в оригинальном вопросе.

static_lab ★★★★★
()

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

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

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

anonymous
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
Web-development