Как сделать первую и последнюю букву заглавной?

Question

Дана задача: Пусть в data в свойстве text есть какой-то текст. Выведите этот текст в каком-нибудь абзаце. Пусть дана также кнопка. Сделайте так, чтобы по нажатию на эту кнопку, первая и последняя буквы текста стали заглавными.

Сделайте для этого две вспомогательных функции. Пусть первая функция upperCaseFirst параметром принимает текст и возвращает этот текст с заглавной первой буквой, а вторая функция upperCaseLast пусть тоже самое делает для последней буквы текста.

И есть код: HTML

<div id="app">
    <p>Lorem ipsum dolor sit {{ text }}  amet.</p>
    <button v-on:click="changeUpperCase">Изменить текст</button>
</div>

<script src="vue.js/vue.js"></script>
<script src="script.js"></script>

И код JS-Vue:

let app = new Vue ({
    el: "#app",
    data: {
        text: "какой-то текст",
    },
    methods: {
        // Изменяет имя
        upperCaseFirst: function() {
            this.text = this.text[0].toUpperCase() + this.text.substring(1);
        },
        
        // Изменяет возраст
        upperCaseTwo: function() {
            this.text = this.text[]
        },

        changeUpperCase: function() {
            this.upperCaseFirst();
            this.upperCaseTwo();
        },
    }
});

Разобрался, как по нажатию на кнопку делать первую букву заглавной, а вот как делать последнюю понять не могу. При использовании toUpperCase и substring, выделяется только одна последняя буква, но все слово удаляется.

Answer 1

this.text = this.text.replace(/(?:^.)|(?:.$)/g, (a) => a.toUpperCase())

Answer 2

let app = new Vue({
  el: "#app",
  data: {
    text: "какой-то текстф",
  },
  methods: {
    // Изменяет имя
    upperCaseFirst(string) {
      this.text = string.charAt(0).toUpperCase() + string.slice(1);
    },

    // Изменяет возраст
    upperCaseTwo(string) {
      let baseString = this.text.split('')
      baseString[string.length - 1] = this.text.charAt(string.length - 1).toUpperCase();
      this.text = baseString.join('');
    },

    changeUpperCase(string) {
      this.upperCaseFirst(string);
      this.upperCaseTwo(string);
    },
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <p>Lorem ipsum dolor sit {{ text }} amet.</p>
  <button v-on:click="changeUpperCase(text)">Изменить текст</button>
</div>

БЛОГ НА HUSL

Как сделать первую и последнюю букву заглавной?

Ответы (2 шт):