Scenario: I am working on creating a community platform where users can share comments. Whenever a comment contains a URL, I want to turn it into a clickable component.
Challenge Statement:
I have a dataset in the form of a string and my aim is to replace any instances of “https://…” within it with
<my-component url:=“https://…”></my-component><template>
<div ref=“container”>
<!—- The goal is to place the updated content here —>
<!—-The clickable link should be <my-component url="https://example.com"></my-component>—->
</div>
</template>
<script>
export default {
data(){
return {
text: "The link is https://example.com"
}
},
mounted(){
this.$refs.container.innerHTML = ?
// Help needed for replacing the content here.
}
}
</script>
I understand that using the replace function with regex can help me find and swap certain characters, but I’m unsure about implementing this replacement with a component.