Character count in addition to word and line counts

[lasseeee]

It would be great to be able to show the character count, not only words and lines. Character counts are helpful to meet a fields min or max character validation.

[HectorLS]

Hello @lasseeee , have you managed a custom implementation of this ?

[lasseeee]

Nope, I didn't look into it further. I settled with backend validation.

[MaViGit]

Hi @lasseeee and @HectorLS I needed almost the same feature: char count and standard-pages approx count. I included easymde in my VueJS application in a module so I implemented the function in that module. There is a computed property which updates continuously the counters calling a method to do the count. Probably is not the best way to approach at least computationally speaking but it should be an on-going calculation. Maybe it can be deactivated by some flag or related to a button. I used some regex to exclude from calculation the characters used for formatting (e.g. bold should be only 4 digits: excluding the stars)

I'm going to post the function-related code I wrote, maybe it could help or be used in the core code of easymde if you like.

<template>
  <div class="vue-easymde">
    <textarea
      class="vue-simplemde-textarea"
      :name="name"
      :value="value"
      @input="handleInput($event.target.value)"
    />
    <div class="counters">
      **{{countChars}}**
    </div>
  </div>
</template>

<script>
...
computed: {
  ...
  countChars(){
      let stars = (/(\n| |^|\w)(\*+[a-zA-Z0-9_.-]+\*+)/g)
      stars = this.countMatches(this.value,stars,'*')
      let dbltilde = (/(\n| |^|\w)(~~[a-zA-Z0-9_.-]+~~)/g)
      dbltilde = this.countMatches(this.value,dbltilde,'~')
      let headers = (/(\n|^)(#+ )/g)
      headers = this.countMatches(this.value,headers,'#')
      let br = (/(<br>+)/g)
      br = this.countMatches(this.value,br,'<br>')*4
      let qt = (/(\n)(> )/g) 
      qt = this.countMatches(this.value,qt,'> ')*2

      let to_remove = 0 + stars + headers + dbltilde + br +qt

      let txt_length = this.value.length
      //console.log("qt to remove: "+to_remove)
      //console.log("total amount of chars: "+txt_length)

      let cnt_string = this.lng.chars+(txt_length - to_remove) + " - " +
                   this.lng.standardPage+(((txt_length - to_remove)/1800).toFixed(1))
      return cnt_string
    },
...
},
methods: {
...
//returns the number of items matching or 0
    countMatches(val,mtch,symbol){
      let occurences=0
      let result = val.match(mtch)
      //console.log(result)
      if(!result){
        return occurences
      }
      else {
        let res = result.toString()
         let found = res.indexOf(symbol);
        while (found !== -1) {
          occurences++;
          found = res.indexOf(symbol, found + 1);
        }
        //console.log("how many "+symbol+": "+occurences)
        return occurences
      },
...
}
</script>

<style scoped>
  @import "~highlight.js/styles/atom-one-dark.css";
  @import "~easymde/dist/easymde.min.css";*/

  .counters{
    text-align: center;
    font-size: 0.9em;
    color: cadetblue;
  }

</style>

[NicoHood]

Did anyone manage to integrate this directly into easy mardown editor?

[NicoHood]

Guys, I created a PR here: https://github.com/Ionaru/easy-markdown-editor/pull/304