Как сделать подсчет количества строк?

Question

[qwentry]

Как вывести кол-во строк в textarea?

<b-form-textarea
                v-model="text"
                id="mytextarea"
                placeholder="Введите"
                class="form-control form-control-lg"
                rows="10"
              >
</b-form-textarea>

И если мы введем

Строка 1
Строка 2
Строка 3
...
Строка 500

он вывел нам в углу 500.

Самый банальный это

document.getElementById('mytextarea').value.split('\n').length-1

Но даже если так, то как можно запихнуть его в правый нижний угол?

Comments

[Сергей Соколов]

считать ли за 2 строки, если одна длинная строка перенеслась на вторую строку?

[qwentry]

Сергей Соколов, Нет, именно \n
Ниже привели как раз то, что нужно

Answer 1

[0xD34F]

computed: {
  linesCount() {
    return this.text.split('\n').length;
    // или
    return 1 + (this.text.match(/\n/g)?.length ?? 0);
    // или
    return -~this.text.replace(/[^\n]/g, '').length;
    // или
    return Array.prototype.reduce.call(this.text, (acc, n) => acc + (n === '\n'), 1);
  },
},

<div>{{ linesCount }}</div>
<!-- или -->
<div v-text="linesCount"></div>
<!-- или -->
<div v-html="linesCount"></div>
<!-- или -->
<div :text-content.prop="linesCount"></div>

Comments

[qwentry]

Спасибо большое.

Answer 2

[Дима Паутов]

el.value.split(/\r?\n|\r/).length

Создать див, вставить в див счётчик, позиционировать его туда, обернув поле в ещё один див, относительно которого вы позиционируете свой див с счётчиком

Comments

[qwentry]

Спасибо