CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
vikash
vikash

Reputation: 168

Vue.js - How to add html tag in the starting of string when match found

Suppose I have a string like this "hey this is StackOverflow" and my substring is "flow". While searching substring in the string it returns true using *indexOf*

What I want in this like when it matches the substring which is flow it appends the Html tag in between this:

Example:

Input: "hey this is StackOverflow"

Output: "hey this is StackOver <'sometag'> flow <'/sometag'> "

The below code returns the true but didn't get any idea how to append the Html Tag in this.

substring.indexOf(string)

Please help me out from this it is very helpful because I'm not much more aware with JS.

Upvotes: 0

Views: 2058

Answers (3)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

Try string replace method :

let str= "hey this is StackOverflow, flow"


let newStr=str.replace(/flow/g,' <h1>flow</h1>')

console.log(newStr)

Then you could render it in the template using v-html directive like :

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
      el: '#app',

      data() {
        return {
          str: "hey this is StackOverflow"
        }
      },

      computed: {
        newStr() {
        return  this.str.replace(/flow/g, '<b>flow</b>')
        }
      }})
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>


<div id="app" class="container">

  <div v-html="str"></div>
  <div v-html="newStr"></div>
</div>

Upvotes: 2

sazzad
sazzad

Reputation: 525

let given_string = "hey this is StackOverflow" , search = "flow", my_tag = "Tag" , tagged = "";

if(given_string.indexOf(search) !== -1)
  {
    let splited = given_string.split(search);
    splited.forEach(item => {
      if(item !== "")
        {
          tagged += item + " " + "<"+ my_tag +">" + search + "</"+ my_tag +">";
        }
    })
    
    
    
  }

console.log(tagged);

Upvotes: 0

HeshamSalama
HeshamSalama

Reputation: 158

what you need is string.replace("sometag","<sometag>") instead of substring.indexOf(string)

Upvotes: 1

Related Questions