清理 HTML 标签属性

Posted 2023-02-24

【中文标题】清理 HTML 标签属性

【英文标题】：Cleaning up HTML tag attributes

【发布时间】：2011-05-04 18:06:09

【问题描述】：

我需要使用 javascript 浏览大量 html 以将属性引号语法调整为全双引号。我不需要担心诸如“禁用”或“选定”之类的纯键属性。

这是我当前的测试用例：

var text = "<input class=daily_input type='hidden' size='1' value=3 disabled />";
var regex = /<([\w]+)([^>]+)([\w]+)=['"]?([^'\s|"\s|\s]*)['"]?([^>]+)>/gi;
text = text.replace( regex, "<$1$2$3=\"$4\"$5>" );

console.log(text); // logs <input class=daily_input type='hidden' size='1' value="3" disabled />

看起来它仍然只是调整最后一个属性。我可以使用 TextMate 中的正则表达式查找/替换轻松测试匹配项，以下内容将匹配文本 HTML 标记中的每个属性：

/([\w]+)=['"]?([^'\s|"\s|\s]*)['"]?/gi

我怎样才能改变它来捕捉和调整每个属性，而不仅仅是最后一个？折腾了好久都没有结果

【参考方案1】：

我知道这是一个迟到的答案，但如果你总是可以使用 sanitize-html 它是为节点编写的，但很确定你可以针对库（或你的代码）运行 browserify。

注意，它使用 lodash，所以如果你已经在使用它，那么你可能需要调整包。

这个例子比你要找的更多......我使用这个库来清理输入代码，从这里转换为降价存储在数据库中，我通过marked 重新水化。

// convert/html-to-filtered-markdown.js

'use strict';

var sanitize = require('sanitize-html') //https://www.npmjs.org/package/sanitize-html
    ,toMarkdown = require('to-markdown').toMarkdown
    ;

module.exports = function convertHtmlToFilteredMarkdown(input, options) 
  if (!input) return '';

  options = options || ;

  //basic cleanup, normalize line endings, normalize/reduce whitespace and extra line endings
  var response = (input || '').toString().trim()
    .replace(/(\r\n|\r|\n)/g, '\n') //normalize line endings
    .replace(/“/g, '"') //remove fancy quotes
    .replace(/”/g, '"') //remove fancy quotes
    .replace(/‘/g, '\'') //remove fancy quotes
    .replace(/’/g, '\'') //remove fancy quotes
    ;

  //sanitize html input
  response = sanitize(response, 
    //don't allow table elements
    allowedTags: [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'p', 'a', 'ul', 'ol', 'nl', 'li', 'b', 'i', 'strong', 'em', 'strike', 'code', 'hr', 'br', 'div', 'table', 'thead', 'caption', 'tbody', 'tr', 'th', 'td', 'pre' ],

    //make orderd lists
    transformTags: 
      'ol': 'ul'
    
  ).replace(/\r\n|\r|\n/g,'\n') //normalize line endings;

  if (!options.tables) 
    response = response.replace(/[\s\n]*\<(\/?)(table|thead|tbody|tr|th|td)\>[\s\n]*/g, '\n\n') //replace divs/tables blocks as paragraphs
  

  //cleanup input further
  response = response
    .replace(/[\s\n]*\<(\/?)(div|p)\>[\s\n]*/g, '\n\n') //divs and p's to simple multi-line expressions
    .replace(/\>#/g, '\n\n#') //cleanup #'s' after closing tag, ex: <a>...</a>\n\n# will be reduced via sanitizer
    .replace(/\\s+\</,'<') //remove space before a tag open
    .replace(/\>\s+\n?/,'>\n') //remove space after a tag close
    .replace(/\&?nbsp\;?/g,' ') //revert nbsp to space
    .replace(/\<\h[12]/g,'<h3').replace(/\<\/\h[12]/g,'</h3') //reduce h1/h2 to h3
    ;

  //convert response to markdown
  response = toMarkdown(response);

  //normalize line endings
  response = response
    .replace(/(?:^|\n)##?[\b\s]/g,'\n### ') //reduce h1 and h2 to h3
    .replace(/(\r\n|\r|\n)/g, '\n') //normalize line endings
    .trim()

  return response + '\n';

【参考方案2】：

text.replace(/='([^']*)'/g, '="$1"').replace(/=([^"'][^ >]*)/g, '="$1"')

或者（一个替换）：

text.replace(/='([^']*)'|=([^"'][^ >]*)/g, '="$1"')

【讨论】：

首先，谢谢！这样可行。我唯一的问题是是否可以在一个替换（）中完成所有这些操作。 HTML 文件可能非常大，效率是关键。不过我会玩的。

@thechriskelley：在一个“替换”中添加了解决方案