Is there way to do partial text stylization in vue (nuxt.js)-CodePudding

We are creating an application in vue

Does anyone know how to format text partially like this?

You cannot create hard constraints from ellipses, but this functional may be procedural.

CodePudding user response：

If you know what words you need to style, try like following snippet:

new Vue({
  el: "#demo",
  data() {
    return {
      messages: { unstyled: 'no styling!', styled: 'platformy dobrix del!' },
    };
  },
  methods: {
    words(string) {
      return string.split(/\s /);
    },
    isMarked(string) {
      return /dobrix/i.test(string);
    },
  },
})

.marked {
  color: red;
  position:relative;
}
.marked::before {
  content: "";
  background: turquoise;
  position: absolute;
  height: 20px;
  width: 92%;
  top: 20px;
  z-index: -1;
  border-radius: 10px;
}
*{
  font-weight: 800;
  font-size: 32px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div class="container">
    <div v-for="(value, name) in messages" :key="name">
      <span v-for="(word, index) in words(value)" :key="index">
        <span v-if="isMarked(word)" class="marked">{{ word }} </span>
        <span v-else>{{ word }} </span>
      </span>
    </div>
  </div>
</div>