characters missing in javascript replace function vuejs

Question

I am using the replace method as follows:

<code v-html="'/<test>/'.replace(/(?:\r\n|\r|\n)/g, 'testing')"></code>

I have a larger string that I am testing against with many \n but I noticed with the above replace function to remove these characters, somehow the value <test> inside // gets replaced.

Luke Trenaman · Accepted Answer · 2021-11-20 03:48:16Z

2

The /<test>/ string isn't turning into //, it's being rendered by the v-html directive. To more accurately test your replace method I'd recommend using the v-text directive instead.

Below is a demonstration of the difference in output between the two directives.

new Vue({
  el:"#app"
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p>Using v-html</p>
  <code v-html="'/<test>/'.replace(/(?:\r\n|\r|\n)/g, 'testing')"></code>
  <br/>
  <p>Using v-text</p>
  <code v-text="'/<test>/'.replace(/(?:\r\n|\r|\n)/g, 'testing')"></code>
</div>

answered Nov 20, 2021 at 3:48

Luke Trenaman

3831 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

dataviews Over a year ago

Actually, I think what's happening is that html is trying to render <test>, so that is why it is blank. The regex isn't actually doing anything there, but rather html is trying to render this as a tag.

dataviews Over a year ago

But how do you render the new lines then, where previously I was replacing them.

Luke Trenaman Over a year ago

I'm unsure of what your goal is. Your original question is attempting to replace newline characters with the string 'testing' Are you trying to replace newline characters with a line break <br/> instead?

Collectives™ on Stack Overflow

characters missing in javascript replace function vuejs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related