Как отследить смену слова в контейнере div и выполнить функцию?

Question

На странице имеется контейнер <div class="word">Привет</div> Как с помощью MutationObserver сделать так, что-бы когда в контейнере div имеется текст "Привет" выполняласть одна функция, а когда любое другое слово или текст, то вторая функция?

Answer 1

onInputHello - срабатывает, когда ввели привет, пробелы не учитываются
noOnInputHello - срабатывает, когда ввели любой другой текст

const inputNode = document.querySelector('.input');
const outputNode = document.querySelector('.output');
const btnHelloNode = document.querySelector('.btn_hello');
const btnNoHelloNode = document.querySelector('.btn_no-hello');
const btnClearNode = document.querySelector('.btn_clear');
const defaultTextInput = inputNode.innerText;

function initMutationObserver(findedText, fnTrue, fnFalse) {
  new MutationObserver((mutationsList, observer) => {
    for (let mutation of mutationsList) {
      if (
        (
          mutation.type === 'characterData' ||
          mutation.type === 'childList'
        ) &&
        inputNode.textContent.trim().toLowerCase() === findedText
      ) {
        fnTrue();
      } else {
        fnFalse();
      }
    }
  }).observe(inputNode, { characterData: true, subtree: true, childList: true });
}

function onInputHello() {
  outputNode.innerText = 'Ввели привет';
}

function noOnInputHello() {
  outputNode.innerText = 'Ввели не привет';
}

function createAndAppendNodeInsertIntoInput(nodeText, nodeIntoInsert) {
  const divNode = document.createElement('div');

  divNode.innerText = nodeText;
  nodeIntoInsert.append(divNode);
}

initMutationObserver('привет', onInputHello, noOnInputHello);

btnHelloNode.addEventListener('click', () => {
  createAndAppendNodeInsertIntoInput('привет', inputNode);
});

btnNoHelloNode.addEventListener('click', () => {
  createAndAppendNodeInsertIntoInput('не привет', inputNode);
});

btnClearNode.addEventListener('click', () => {
  inputNode.innerHTML = '';
});

body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.input {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.output {
  padding: 5px 10px;
  border: 4px dashed orange;
}

[contenteditable] {
  border: 2px solid black;
  padding: 5px 10px;
  border-radius: 5px;
  outline: none;
  transition: border-color 0.2s ease-in-out;
}

[contenteditable]:focus {
  border-color: #4e4efb;
}

<div class="input" contenteditable>
  Сюда вводить привет
</div>

<div class="output">
  Ввели привет или не привет
</div>

<button class="btn btn_hello" type="button">
  Добавил узел "<span>привет</span>"
</button>

<button class="btn btn_no-hello" type="button">
  Добавил узел "<span>не привет</span>"
</button>

<button class="btn btn_clear" type="button">
  Очистить
</button>

БЛОГ НА HUSL

Как отследить смену слова в контейнере div и выполнить функцию?

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