0xD34F

html_content.gsub!(/<span edit="false">([^<]+)<\/span>/, '\1')

const addSum = data =>
  (Array.isArray(data) ? data : []).reduce((acc, n) => {
    n.childrenCountSum = addSum(n.children);
    return acc + +n.count + n.childrenCountSum;
  }, 0);

childNodes включает текстовые узлы, у которых атрибутов не бывает

замените на children

Метод replace умеет принимать функцию, которая получает найденную подстроку и должна вернуть замену:

m => `<span style="background: red;">${m}</span>`

Или, можно в строке замены указать, куда следует подставить заменяемую подстроку:

'<span style="background: red;">$&</span>'

Ерунду с интервалом уберите. Замену производите у текстового содержимого вместо разметки. Т.е.:

const p = document.querySelector('.resultParagraph');

document.querySelector('.input').addEventListener('keypress', e => {
  if (e.key === 'Enter') {
    const regex = RegExp(e.target.value, 'gmi');
    const replacement = '<span style="background: red;">$&</span>';
    p.innerHTML = p.textContent.replace(regex, replacement);
  }
});

[ n or b[i] for i, n in enumerate(a) ]

nextTick

И ещё вот такого

$('.selectpicker')

быть не должно. Вместо селектора используйте ссылку на элемент.

data: () => ({
  items: Array.from(
    { length: 5 },
    (_, i) => Array.from(
      { length: 5 },
      (_, j) => i * 5 + j
    )
  ),
  active: null,
}),
watch: {
  active(val) {
    if (val) {
      this.$nextTick(() => this.$refs.input[0].focus());
    }
  },
},

<table>
  <tr v-for="(row, iRow) in items">
    <td v-for="(val, iCol) in row" @click="active = { iRow, iCol }">
      <input
        v-if="active && active.iRow === iRow && active.iCol === iCol"
        v-model="row[iCol]"
        @keypress.enter="active = null"
        ref="input"
      >
      <template v-else>{{ val }}</template>
    </td>
  </tr>
</table>

https://jsfiddle.net/grtsxoaf/

computed: {
  flatArr() {
    return this.arr
      .flatMap((n, i) => n.map((m, j) => m && ({ gridRowStart: i + 1, gridColumnStart: j + 1 })))
      .filter(Boolean);
  },
},

<div class="grid">
  <div v-for="n in flatArr" class="cell" :style="n"></div>
</div>

flat = [ n for m in united_scores for n in m ]
ids = set(n['id'] for n in flat)
grouped = [ { 'id': n, 'score': sum(m['score'] for m in flat if m['id'] == n) } for n in ids ]

хочу, чтобы в переменной theme лежало значение state.theme, но по факту получается так: theme.theme

Ну так вы сами объект засунули.

Хотите строку - храните строку:

export const theme = (state = 'light', action) => {
  switch (action.type) {
    case constants.CHANGE_THEME:
      return action.payload;

    default:
      return state;
  }
};

mix-blend-mode, например

const result = [...str].reduce((acc, n) => (acc[n] = (acc[n] ?? 0) + 1, acc), {});

Или, в более общем виде:

function count(data, key = n => n) {
  const counted = {};

  for (const n of data) {
    const k = key(n);
    counted[k] = -~counted[k];
  }

  return counted;
}


const result = count(str);

Работать можно не только со строками, но и, например, с массивами:

const nums = [ -Infinity, -1, 0, 0, 0, 0, 69, 187, 666 ];
console.log(count(nums, Math.sign)); // {0: 4, 1: 3, -1: 2}

Или коллекциями DOM-элементов:

<div data-country="USA">New York</div>
<div data-country="USA">Boston</div>
<div data-country="USA">Las Vegas</div>
<div data-country="Japan">Osaka</div>
<div data-country="Japan">Tokyo</div>
<div data-country="Japan">Kyoto</div>
<div data-country="Japan">Yokohama</div>
<div data-country="Germany">Munich</div>
<div data-country="Germany">Dresden</div>

const cities = document.querySelectorAll('[data-country]');
console.log(count(cities, n => n.dataset.country)); // {USA: 3, Japan: 4, Germany: 2}

Вообще, с любыми итерируемыми объектами работать можно:

count(Array(9).keys(), n => [ 'чётные', 'нечётные' ][n & 1]) // {чётные: 5, нечётные: 4}

Вместо добавления в #elem нового контента следует полностью перезаписывать его содержимое:

document.querySelector('#elem').innerHTML = `
  <table>${Array.from({ length: 2 }, (_, iRow) => `
    <tr>${Array.from({ length: columns }, (_, iCol) => `
      <td>${iRow + 1}.${iCol + 1}</td>`).join('')}
    </tr>`).join('')}
  </table>
`;

Или, можно заранее создать таблицу с пустыми строками:

const table = document.createElement('table');
table.insertRow();
table.insertRow();
document.querySelector('#elem').append(table);

И добавлять недостающее или удалять лишнее:

for (const n of table.rows) {
  while (n.cells.length < columns) {
    n.insertCell().textContent = `${-~n.rowIndex}.${n.cells.length}`;
  }

  while (n.cells.length > columns) {
    n.lastElementChild.remove();
  }
}

<input v-model.number="val">

watch: {
  val(val) {
    this.val = Math.max(1, val);
  },
},

Как проверить, есть ли в массиве повторяющиеся элементы...

const hasDuplicates = arr.length > new Set(arr).size;

...и как записать эти элементы в новый массив...

// Получаем повторяющиеся элементы в единственном экземпляре
const duplicatedItemsUnique = Array.from(arr.reduce((acc, n) => (
  acc[+acc[0].has(n)].add(n),
  acc
), [ new Set, new Set ])[1]);

// Получаем все неуникальные элементы
const duplicatedItemsAll = arr.filter(function(n) {
  return this.get(n) > 1;
}, arr.reduce((acc, n) => acc.set(n, -~acc.get(n)), new Map));

...или оставить только элементы которые повторяются?

arr.splice(0, arr.length, ...arr.filter(function(n) {
  return this.get(n);
}, arr.reduce((acc, n) => acc.set(n, acc.has(n)), new Map)));

const containerSelector = '.lg-container';
const itemSelector = `${containerSelector} .lg-hotspot`;
const buttonSelector = `${itemSelector} .lg-hotspot__button`;
const activeClass = 'lg-hotspot--selected';

document.addEventListener('click', ({ target: t }) => {
  const button = t.closest(buttonSelector);
  const item = t.closest(itemSelector);

  if (button) {
    item.closest(containerSelector).querySelectorAll(itemSelector).forEach(n => {
      n.classList[n === item ? 'toggle' : 'remove'](activeClass);
    });
  } else if (!item?.classList.contains(activeClass)) {
    document.querySelectorAll(itemSelector).forEach(n => {
      n.classList.remove(activeClass);
    });
  }
});

Если не должно быть так, что одновременно могут быть видимы всплывающие окна в разных контейнерах, тогда item.closest(containerSelector) надо заменить на document.

on.slideChange + slideTo

Метод connect не модифицирует переданный ему компонент, а создаёт новый.

Tак что правильно будет

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

Ещё у вас в types отсутствует INITIALIZE, надо добавить.