Question

我在节点中有这个HTML string：

<a data-style="width:32px" id="heilo-wrld" style="height:64px">
    Hello world
</a>

代码包含data-style和style个属性，我想在一个style属性中合并，如下所示：

<a id="heilo-wrld" style="width:32px; height:64px;">
    Hello world
</a>

我也可以使用这样的复杂HTML块：

<div class="wrapper" data-style="background-color: red;">
    <a data-style="width:32px" id="heilo-wrld" style="height:64px">
        Hello world
    </a>
</div>

要获得此结果：

<div class="wrapper" style="background-color: red;">
    <a id="heilo-wrld" style="width:32px; height:64px;">
        Hello world
    </a>
</div>

我找到了一些插件，但它没有做这个特定的工作：

存在一些聪明的方法吗？

Answer 1

使用jsdom，您可以像这样定义mergeStyles函数：

const jsdom = require('jsdom');

function mergeStyles(html, callback) {
  return jsdom.env(html, function(errs, window) {
    const { document } = window;

    Array.from(
      document.querySelectorAll('[data-style]')
    ).forEach(function(el) {
      const styles = [];

      Array.from(el.attributes).forEach(function(attr) {
        if (attr.name !== 'style' && attr.name !== 'data-style') {
          return;
        }

        styles.push(attr.value);

        el.removeAttributeNode(attr);
      });

      if (!styles.length) {
        return;
      }

      el.setAttribute('style', styles.join(';'));
    });

    const result = document.body.innerHTML;

    return callback(null, result);
  });
}

然后称之为：

const input = `
    <div class="wrapper" data-style="background-color: red;">
        <a data-style="width:32px" id="heilo-wrld" style="height:64px">
            Hello world
        </a>
    </div>
`;

mergeStyles(input, function(err, result) {
  if (err) {
    throw err;
  }

  // `result` should contain the HTML with the styles merged.
  console.log(result);
});

将HTML元素属性与节点合并

1 个答案: