Level 46
You could use a computed property that strips out the HTML tags and render that as the textarea content.
Jun 5, 2017
5
Level 1
VueJS remove html tags from rendered text
I am needing to remove the opening and closing <p> tags from some rendered comment text. I pass the content to a component as a prop and i think that in doing so, it doesn't allow for the v-html directive to work correctly.
I need the content to render without the html tags
Here is where I am trying to render normally with v-html
<textarea class="form-control comment-inline-edit" v-html="content" name="comment-inline-edit" cols="45" rows="3"></textarea>
And here is where I am passing the rendered content from the parent component
<CommentEdit v-show="isEditting" :content="comment.content.rendered" v-on:cancel="cancelEdit" />
Is there a VueJS way to do this other than using v-html?
Level 5
You can try something like this:
computed: {
strippedHtml() {
let regex = /(<([^>]+)>)/ig;
return this.comment.content.rendered.replace(regex, "");
}
}
2 likes
Level 5
@Sam T. Nice answer, I just converted this to a composable :
export function useStripHtml(html : string) {
let regex = /(<([^>]+)>)/ig;
return html.replace(regex, "");
}
Level 35
I always use this solution mentioned as a top answer here: https://stackoverflow.com/questions/5002111/how-to-strip-html-tags-from-string-in-javascript
var html = "<p>Some HTML</p>";
var div = document.createElement("div");
div.innerHTML = html;
var text = div.textContent || div.innerText || "";
Level 1
My preferred method is
stripTags(str) {
let doc = new DOMParser().parseFromString(str, 'text/html');
return doc.body.textContent || "";
}
Please or to participate in this conversation.