如何将提及的用户更改为帖子中的 html 标签?(VUE-节点) [英] How to change users mentioned to a html a tag in a post? (VUE-NODE)
问题描述
我有一个 body 属性，其中包含涉及@username1 @username2 的文本.我想将昵称@user1 @user2 等的位置更改为路由器链接，可以使用正则表达式吗?
最终代码需要这样(链接配置文件中没有@)
我在这个codepen 分享了解决方案
代码:
<div><h3>原版</h3><div id="原始"类=盒子">{{身体}}<h3>替换</h3><div id="replaced";类=盒子"v-html="bodyReplaced";></div>
</模板><脚本>导出默认{数据() {返回 {身体:'嗨@jrambo 和@jwick 我是@cincarnato'，};},计算:{身体替换(){/* 使用 string.replace1 参数:正则表达式匹配2 参数:返回新文本的函数(该函数接收正则表达式匹配的字符串)*/返回 this.body.replace(/@\w+/g,(用户) =>'<a href="#";>'+用户+'</a>')}}};<风格>.盒子{边框:1px 纯灰色；填充:10px；边距:10px；}</风格>
I have a body property that contains text that involves @username1 @username2. I want to change where are nicknames @user1 @user2 etc to router-links, its possible to do it with regex?
The final code need to be like this (without the @ in link profile)
<router-link :to='/profile/username1'></router-link>
I share the solution in this codepen
CODE:
<template>
<div>
<h3>Original</h3>
<div id="original" class="box">
{{body}}
</div>
<h3>Replaced</h3>
<div id="replaced"
class="box"
v-html="bodyReplaced"
></div>
</div>
</template>
<script>
export default {
data() {
return {
body: 'Hi @jrambo and @jwick I am @cincarnato',
};
},
computed: {
bodyReplaced(){
/* Using string.replace
1 parameter: regex to match
2 parameter: a function that return the new text (the funcion receive the string matched by regular expression)
*/
return this.body.replace(
/@\w+/g,
(user) => '<a href="#" >'+user+'</a>'
)
}
}
};
</script>
<style>
.box{
border: 1px solid grey;
padding: 10px;
margin: 10px;
}
</style>
这篇关于如何将提及的用户更改为帖子中的 html 标签?(VUE-节点)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
