Javascript 来自后端带有链接的文本的数据如何在前端变得可点击

发布于04月26日

例如，我有这个objects of array:

const data = [
  { name: 'John', age: 25, 'body' : "this data has link https://stackoverflow.com/questions/ask" },
  { name: 'Jane', age: 31, 'body' : "this data has link https://stackoverflow.com/questions/ask" },
  { name: 'Bob', age: 18, 'body' : "this data has link https://stackoverflow.com/questions/ask" }
];

在frontend里展示的话怎么才能变成link呢？

推荐答案

如果我理解正确的话，请看下面的片段:

const { reactive, computed } = Vue
const app = Vue.createApp({
  setup() {
    const mydata = reactive([
      { name: 'John', age: 25, 'body' : "this data has link https://stackoverflow.com/questions/ask" },
      { name: 'Jane', age: 31, 'body' : "this data has link https://stackoverflow.com/questions/ask" },
      { name: 'Bob', age: 18, 'body' : "this data has link https://stackoverflow.com/questions/ask" }
    ])
    const formatedData = computed(() => {
      const expression = / *https:.+/
      return mydata.map(d => {
        let link = d.body.match(expression)
        d.body = d.body.replace(expression, ` <a href="${link}">${link}</a>`)
        return d
      })
    })
    return { mydata, formatedData }
  }
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div v-for="(dat, i) in formatedData" :key="i">
    <p>{{ dat.name }} - <span>{{ dat.age }}</span></p>
    <div v-html="dat.body"></div>
  </div>
</div>