Как оформить текстовый узел с помощью Vue. js?

Question

<div id='app'>{{ userContent }}</div>

В userContent, если строка начинается с -, я хочу оформить только эту строку красным цветом. Я могу изменить userContent данные в js с помощью класса для этих строк и использовать v-html, но тогда я потеряю защиту XSS. Есть ли способ иметь XSS-защиту с Vue. js, но также иметь возможность стилизовать userContent?

Answer 1

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

Вы можете самостоятельно проанализировать строку, используя регулярное выражение для сопоставления строк, начинающихся с дефиса, что-то вроде (?<=\-)(.*?)(?=\n) или \-(.*?)\n, оберните это содержимое в новый элемент с помощью класса, а затем стилизуйте его, но затем вам нужно будет внедрить его обратно в html, который, как я считаю, откроет вам доступ к XSS, так же, как с v - html.

Насколько мне известно, и после быстрого поиска, кажется, нет никакого способа сделать это чисто с CSS.