使用 JavaScript 或 jQuery 更新 HTML 以具有結束標記

Question

注意：請參閱下面的解決方案！

問題

默認情況下，JS 和 jQuery 都會刪除空<foreignObject>的結束標記。 通常這不會有問題。 但是，在 IE11 中，由於自關閉元素，將拋出以下警告。

HTML1500: Tag cannot be self-closing. Use an explicit closing tag.

案例分析

我正在嘗試利用 Gulp 將結束標簽添加到一系列 SVG 文件中。 SVG 文件最初的格式如下：

電子郵件.svg ,

<svg width="24" height="24" viewBox="0 0 24 24">
  <path fill="#AFAFB0" fill-rule="evenodd" d="M1,5 L23,5 C23.5522847,5 24,5.44771525 24,6 L24,18 C24,18.5522847 23.5522847,19 23,19 L1,19 C0.44771525,19 6.76353751e-17,18.5522847 0,18 L0,6 C-6.76353751e-17,5.44771525 0.44771525,5 1,5 Z M21.2034005,7.09747208 L12,13.8789251 L2.79659952,7.09747208 C2.57428949,6.93366469 2.26127947,6.98109045 2.09747208,7.20340048 C1.93366469,7.42571051 1.98109045,7.73872053 2.20340048,7.90252792 L11.7034005,14.9025279 C11.8797785,15.0324907 12.1202215,15.0324907 12.2965995,14.9025279 L21.7965995,7.90252792 C22.0189095,7.73872053 22.0663353,7.42571051 21.9025279,7.20340048 C21.7387205,6.98109045 21.4257105,6.93366469 21.2034005,7.09747208 Z"/>
</svg>

在我的 gulpfile 中，我使用gulp-cheerio嘗試通過將結束標記添加到任何自閉合元素來操作 HTML。

gulpfile.js

const gulp = require('gulp');
const cheerio = require('gulp-cheerio');

const rootPath = './src/assets';
const paths = {
  svg: {
    in: `${rootPath}/icons/raw/**/*.svg`,
    out: `${rootPath}/icons/svg`,
  }
};

const svg = () => {
  return gulp
    .src(paths.svg.in)
    .pipe(cheerio({
      run: ($, file) => {
        const updatedHtml = $.html().replace(/<\s*([^\s>]+)([^>]*)\/\s*>/g, '<$1$2></$1>');
        // Update self-closing elements to have a closing tag
        $('svg').replaceWith(updatedHtml);
      }
    }))
    .pipe(gulp.dest(paths.svg.out));
};

如果我console.log的updatedHtml它將有結束標記。 但是，當我使用.html()或.replaceWith() ，輸出有一個自關閉標簽。

我也試過gulp-replace包。 下面產生與上面相同的結果。

const svg = () => {
  return gulp
    .src(paths.svg.in)
    .pipe(replace(/<\s*([^\s>]+)([^>]*)\/\s*>/g, '<$1$2></$1>'))
    .pipe(gulp.dest(paths.svg.out));
};

題

如何讓輸出包含結束標記？ 有沒有更好的包，或者這真的不可能？

Answer 1

感覺像是一種解決方法，但通過刪除.pipe(gulp.dest(paths.svg.out));獲得了 SVG 節省.pipe(gulp.dest(paths.svg.out)); 而是使用fs 。

const gulp = require('gulp');
const cheerio = require('gulp-cheerio');
const fs = require('fs');
const rename = require('gulp-rename');

const rootPath = './src/assets';
const paths = {
  svg: {
    in: `${rootPath}/icons/raw/**/*.svg`,
    out: `${rootPath}/icons/svg`,
  }
};

const svg = () => {
  let dirName;
  let fileName;

  return gulp
    .src(paths.svg.in)
    .pipe(rename((path) => {
      // Ensure the file name is kebob-case
      path.basename = path.basename
        .replace(/[^A-Za-z0-9\ ]/g, '')
        .replace(/([a-z])([A-Z])/g, '$1-$2')
        .replace(/\s+/g, '-')
        .toLowerCase();

      dirName = path.dirname;
      fileName = path.basename;
    }))
    .pipe(cheerio({
      run: ($, file) => {
        $('svg').attr('class', `svg-${fileName}`);

        const path = `${paths.svg.out.svg}/${dirName}/${fileName}.svg`;
        const updatedHtml = $.html().replace(/<\s*([^\s>]+)([^>]*)\/\s*>/g, '<$1$2></$1>');

        fs.writeFile(path, updatedHtml);
      }
    }))
};

其中，基於上述 SVG，返回

<svg width="24" height="24" viewbox="0 0 24 24" class="svg-email">
  <path fill="#AFAFB0" fill-rule="evenodd" d="M1,5 L23,5 C23.5522847,5 24,5.44771525 24,6 L24,18 C24,18.5522847 23.5522847,19 23,19 L1,19 C0.44771525,19 6.76353751e-17,18.5522847 0,18 L0,6 C-6.76353751e-17,5.44771525 0.44771525,5 1,5 Z M21.2034005,7.09747208 L12,13.8789251 L2.79659952,7.09747208 C2.57428949,6.93366469 2.26127947,6.98109045 2.09747208,7.20340048 C1.93366469,7.42571051 1.98109045,7.73872053 2.20340048,7.90252792 L11.7034005,14.9025279 C11.8797785,15.0324907 12.1202215,15.0324907 12.2965995,14.9025279 L21.7965995,7.90252792 C22.0189095,7.73872053 22.0663353,7.42571051 21.9025279,7.20340048 C21.7387205,6.98109045 21.4257105,6.93366469 21.2034005,7.09747208 Z"></path>
</svg>