Манипуляция с HTML во Vue.js и cash-dom

В этой статье мы рассмотрим, как манипулировать пользовательским HTML-кодом прямо в вашем приложении Vue.js с использованием DOMParser API и библиотеки Cash, которая предоставляет jQuery-подобный синтаксис.

Шаг 1. Создание Vue.js приложения

Создайте новое приложение Vue.js (если вы еще этого не сделали) и добавьте поле ввода для ввода HTML-кода пользователем:

<template>
  <div id="app">
    <textarea v-model="userHtml" placeholder="Введите ваш HTML-код здесь"></textarea>
    <button @click="manipulateHtml">Манипулировать HTML</button>
    <div v-html="manipulatedHtml"></div>
  </div>
</template>

Шаг 2. Добавление свойств данных для userHtml и manipulatedHtml

<script>
import $ from "cash-dom";

export default {
  data() {
    return {
      userHtml: "",
      manipulatedHtml: "",
    };
  },
  methods: {
    manipulateHtml() {
      // Здесь мы будем манипулировать HTML-кодом пользователя
    },
  },
};
</script>

Шаг 3. Установка библиотеки Cash

Установите библиотеку Cash, легковесную альтернативу jQuery:

npm install cash-dom

Шаг 4. Использование Cash для манипуляции с HTML-кодом

Реализуйте метод manipulateHtml для анализа и манипуляции пользовательским HTML-кодом с использованием DOMParser API и библиотеки Cash:

methods: {
  manipulateHtml() {
    // Преобразование пользовательского HTML-кода в структуру DOM
    const parser = new DOMParser();
    const htmlDoc = parser.parseFromString(this.userHtml, "text/html");

    // Оберните полученный DOM с помощью Cash, чтобы использовать синтаксис, похожий на jQuery
    const $htmlDoc = $(htmlDoc);

    // Выполните желаемые манипуляции с анализированным HTML-кодом с использованием Cash
    // например, измените текст всех абзацев на верхний регистр
    $htmlDoc.find("p").each((_, p) => {
      const $p = $(p);
      $p.text($p.text().toUpperCase());
    });

    // Преобразование манипулированной структуры DOM обратно в строку HTML
    this.manipulatedHtml = $htmlDoc.find("body").html();
  },
},

Шаг 5. Форматирование HTML

Для форматирования можно оспользовать специальную библиотеку. Документация по js-beautify на русском.