使用JavaScript或jQuery更新HTML以获得结束标记

Question

The Problem

默认情况下，JS和jQuery都将删除空<foreignObject>的结束标记。通常这不是问题。但是，在IE11中，由于自动关闭元素，将引发以下警告。

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

Case Study

我正在尝试利用Gulp为一系列SVG文件添加结束标记。 SVG文件最初的格式如下：

Email.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));
};

Question

如何让输出包含结束标记？有没有更好的包装或这是不是真的可能吗？

Answer 1

感觉就像一个解决方案，但通过删除.pipe(gulp.dest(paths.svg.out));而不是使用fs得到SVG节省。

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>