javascript - Vue.js replace hashtags in text with <router-link> - Stack Overflow

admin管理员组

文章数量:1026989

I receive some text from server which may contain some hashtags and when displaying this text I would like to convert these tags with links.

Example text is: "Today #weather is very nice"

Following code converts the string to

Today <router-link to="/tag/weather">#weather</router-link> is very nice

but it is not rendered again to <a> tag.

<template>
       <p v-html="content"/>
</template>

<script>
export default {
    methods: {
        convertHashTags: function(str) {
            return str.replace(/#([\w]+)/g,'<router-link to="/tag/$1">#$1</router-link>')
        }
    },
    data() {
        return{
             content: 'Today #weather is very nice'
        };
    }

</script>

How can I re-render content?

I tried this approach but it expects whole string to be a single link not some text and some links.

I receive some text from server which may contain some hashtags and when displaying this text I would like to convert these tags with links.

Example text is: "Today #weather is very nice"

Following code converts the string to

Today <router-link to="/tag/weather">#weather</router-link> is very nice

but it is not rendered again to <a> tag.

<template>
       <p v-html="content"/>
</template>

<script>
export default {
    methods: {
        convertHashTags: function(str) {
            return str.replace(/#([\w]+)/g,'<router-link to="/tag/$1">#$1</router-link>')
        }
    },
    data() {
        return{
             content: 'Today #weather is very nice'
        };
    }

</script>

How can I re-render content?

I tried https://codepen.io/movii/pen/WORoyg this approach but it expects whole string to be a single link not some text and some links.

• javascript
• vuejs2
• vue-router
• routerlink

Share Improve this question Follow edited Nov 13, 2017 at 23:38 Employed Russian 215k3636 gold badges321321 silver badges389389 bronze badges asked Nov 13, 2017 at 21:45 Gokhan CelikkayaGokhan Celikkaya 76611 gold badge88 silver badges2222 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Your code seems to fit ok into the dynamic-link ponent.

console.clear()

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const Weather = { template: '<div>weather</div>' }

const routes = [
  { path: '/foo', ponent: Foo },
  { path: '/bar', ponent: Bar },
  { path: '/tag/weather', ponent: Weather },
]

Vue.ponent('dynamic-link', {
  template: '<ponent v-bind:is="transformed"></ponent>',
  props: ['text'],
  methods: {
    convertHashTags: function(str) {
      const spanned = `<span>${str}</span>`
      return spanned.replace(/#([\w]+)/g,'<router-link to="/tag/$1">#$1</router-link>')
    }
  },
  puted: {
    transformed () {
      const template = this.convertHashTags(this.text);
      return {
        template: template,
        props: this.$options.props
      }
    }
  }
})

const router = new VueRouter({ routes })

const app = new Vue({ 
  router,
  data () {
    return {
      text: 'Today #weather is very nice'
    }
  }
}).$mount('#app');

<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.1.10/vue.min.js"></script>
<script src="https://unpkg./vue-router/dist/vue-router.js"></script>

<div id="app">
  <router-link to="/bar">Go to Bar</router-link> |
  <dynamic-link :text="text"></dynamic-link>
   
  <router-view></router-view>
</div>

I receive some text from server which may contain some hashtags and when displaying this text I would like to convert these tags with links.

Example text is: "Today #weather is very nice"

Following code converts the string to

Today <router-link to="/tag/weather">#weather</router-link> is very nice

but it is not rendered again to <a> tag.

<template>
       <p v-html="content"/>
</template>

<script>
export default {
    methods: {
        convertHashTags: function(str) {
            return str.replace(/#([\w]+)/g,'<router-link to="/tag/$1">#$1</router-link>')
        }
    },
    data() {
        return{
             content: 'Today #weather is very nice'
        };
    }

</script>

How can I re-render content?

I tried this approach but it expects whole string to be a single link not some text and some links.

I receive some text from server which may contain some hashtags and when displaying this text I would like to convert these tags with links.

Example text is: "Today #weather is very nice"

Following code converts the string to

Today <router-link to="/tag/weather">#weather</router-link> is very nice

but it is not rendered again to <a> tag.

<template>
       <p v-html="content"/>
</template>

<script>
export default {
    methods: {
        convertHashTags: function(str) {
            return str.replace(/#([\w]+)/g,'<router-link to="/tag/$1">#$1</router-link>')
        }
    },
    data() {
        return{
             content: 'Today #weather is very nice'
        };
    }

</script>

How can I re-render content?

I tried https://codepen.io/movii/pen/WORoyg this approach but it expects whole string to be a single link not some text and some links.

• javascript
• vuejs2
• vue-router
• routerlink

Share Improve this question Follow edited Nov 13, 2017 at 23:38 Employed Russian 215k3636 gold badges321321 silver badges389389 bronze badges asked Nov 13, 2017 at 21:45 Gokhan CelikkayaGokhan Celikkaya 76611 gold badge88 silver badges2222 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Your code seems to fit ok into the dynamic-link ponent.

console.clear()

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const Weather = { template: '<div>weather</div>' }

const routes = [
  { path: '/foo', ponent: Foo },
  { path: '/bar', ponent: Bar },
  { path: '/tag/weather', ponent: Weather },
]

Vue.ponent('dynamic-link', {
  template: '<ponent v-bind:is="transformed"></ponent>',
  props: ['text'],
  methods: {
    convertHashTags: function(str) {
      const spanned = `<span>${str}</span>`
      return spanned.replace(/#([\w]+)/g,'<router-link to="/tag/$1">#$1</router-link>')
    }
  },
  puted: {
    transformed () {
      const template = this.convertHashTags(this.text);
      return {
        template: template,
        props: this.$options.props
      }
    }
  }
})

const router = new VueRouter({ routes })

const app = new Vue({ 
  router,
  data () {
    return {
      text: 'Today #weather is very nice'
    }
  }
}).$mount('#app');

<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.1.10/vue.min.js"></script>
<script src="https://unpkg./vue-router/dist/vue-router.js"></script>

<div id="app">
  <router-link to="/bar">Go to Bar</router-link> |
  <dynamic-link :text="text"></dynamic-link>
   
  <router-view></router-view>
</div>

本文标签： javascriptVuejs replace hashtags in text with ltrouterlinkgtStack Overflow