How to insert space in Camelcase string?

Question

I’m looking for a way to separate string from an array object, coming from an API, for example: Pageviews, get Page Views, I’m using VUEJS.

Answer 1

I made an example to implement in your code:

var regx1 = text.match(/[A-Z]/gm)[1]: On this line I take the second occurrence of capital letter V.

---

text = text.replace(regx1,' '+regx1): On this line I change the V by space and insert it again with all the text after it.

new Vue({
  el: '#app',
  data: {
    stringOriginal: 'PageViews'     
  },
  methods: {
    stringSeparada() {
     var texto = this.stringOriginal;
     var regx1 = texto.match(/[A-Z]/gm)[1];
     texto = texto.replace(regx1,' '+regx1);
     return texto  
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">

  <input type="text" v-model="stringOriginal" /> <br/>
  
  <p>
    Separada: {{ stringSeparada() }}
  </p>

</div>

Answer 2

I believe the simplest way would be to just use the method String.replace() with a regex that will only be capitalized.

If you read this session of the documentation of String.replace(), you will see that the second parameter can be a function or a string. If you use a string you can use some special characters to gain some extra functionality. These characters are:

• $&: Replaces with married string. Ex.:

  "...abc123def...".replace(/\d+/, '{{$&}}') 
  // output: "...abc{{123}}def..."
  

• $`: Replaces with the pre-married string

  "...abc123def...".replace(/\d+/, '{{$`}}')
  // output: "...abc{{...abc}}def..."
  

• $': Replaces by the back of the married string

  "...abc123def...".replace(/\d+/, "{{$'}}")
  // output: "...abc{{def...}}def..."
  

• $n: Replaced by the umpteenth group married in Regex

  "00011122233".replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, "$1.$2.$3-$4")
  // output: "000.111.222-33"
  

Then just make a simple replace with regex and it would be solved:

"PageView".replace(/[A-Z]/g, " $&").trim()

^{* I used Trim to remove the space if the first letter is uppercase. It’s simpler than creating a more complex Regex.}

In the final version of the code I added "support" for accentuation. Actually "support" is for a range specific good inspired by the answers of this question.

Below the final code, simple and functional:

var regex = /([A-ZÀ-Þ])/gu;

new Vue({
  el: '#app',
  data: { original: 'PageViewÁcentoTeste'},
  computed: {
    modificada: function() {
      return this.original.replace(regex, ' $1').trim();
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <input v-model="original">
  <span>"{{ modificada }}"</span>
</div>