strint counter

by Евгений

HTML

<div class="result"></div>
<div class="debug"></div>
<div class="resume"></div>

SCSS

.result,
.resume,
.debug {
  border: 1px solid grey;
  background-color: #dbdbdb;
  padding: 0 4px 4px 4px;
  line-height: 1.5rem;
  &::before {
    display: block;
    padding: 4px;
    margin: 0 -4px;
    background-color: grey;
  }
  &:empty {
    display: none;
  }
}

.result::before {
  content: 'result:';
}
.resume::before {
  content: 'resume:';
}
.debug::before {
  content: 'debug:';
}

JavaScript

const log = (result) => document.querySelector('.result').textContent = result;
const resume = (result) => document.querySelector('.resume').textContent = result;
const debug = (data) => {
	const element = document.querySelector('.debug');
  element.innerHTML += `<div>${data}</div>`;
}

const resultFormat = (acc) => {
	return `${acc.current}${acc.cnt ? acc.cnt + 1 : ''}`;
}
const source = 'AAAABBBCCXYZDDDDEEEFFFAAAAAABBBBBBBBBBBBBBBBBBBBBBBBBBBB';
const result = source.split('')
.reduce((acc, current) => {
	if (acc.current === current) {
  	return {
    	...acc,
      cnt: acc.cnt += 1
    }
  }
  return {
  	...acc,
  	current,
    result: acc.result += resultFormat(acc),
    cnt: 0
  }
}, {result: '', cnt: 0, current: ''})
log(source);
resume(result.result += resultFormat(result))