How to replace value with linebreak and show it in b-modal (with linebreaks)

user_16365685 0
Viewed 148

I'm working with BootstrapVue.

I have a string like following: Hello / my name / is B0BBY / how / are you ?

Now I want to show this string in a <b-modal> and replace all / (Slash) with a linebreak.. I've tried following:

var newString = actualString.replaceAll(" / ", "\n")

If I console.log this newString it shows in my console with a linebreak. But if I'm using it in my b-modal it shows not with a linebreak, it's all in one line.

I think there is a pretty simple solution for it, but I can't figure it out. Thanks for helping me out!

bootstrap-vue vuejs2 vue.js line-breaks javascript
2 Answers

There are two possibilities. If you want to use \n in your HTML, you have to set a CSS property white-space: pre-line; for the parent element.

Or you can simply replace \n with <br>. Both are possible.

var newString = actualString.replaceAll(" / ", "<br>")

actualString = "Hello / my name / is B0BBY / how / are you ?";
var newString = actualString.replaceAll(" / ", "\n")
console.log(newString)

document.getElementById('out').innerHTML = newString;
<div id="out" style="white-space: pre-line; "></div>

user_148071110

Lines in HTML are supposed to be separated with block elements (<p>, etc) or <br>. Changing the way multiline text is rendered (as another answer shows) is a hack that is not needed under normal circumstances when HTML layout can be directly affected.

The string can be separated and rendered as an array:

<b-modal>
  <p v-for="(line, index) in lines(actualString)" :key="index">{{line}}</p>

Where lines is a method (can be converted to a filter or a computed):

lines: actualString => actualString.replaceAll(" / ", "\n")
user_37315010
Related