以编程方式使用带有自定义 html 的 w3c css/html 验证器答案

【问题标题】：programmatically use w3c css/html validators with custom html以编程方式使用带有自定义 html 的 w3c css/html 验证器
【发布时间】：2017-05-26 16:42:49
【问题描述】：

编辑

我已经为 CSS 工作了，只需要进行 HTML 验证。

let css = Array.from(document.styleSheets)
        .reduce((combinedsheet,sheet) => sheet.rules? 
          combinedsheet + Array.from(sheet.rules)
            .reduce((p,c) => p+c.cssText+'\n', ''):
          combinedsheet, '')        
      try {
        document.querySelector('a.validation.css').href = 
          'https://jigsaw.w3.org/css-validator/validator?text=' +
          encodeURIComponent(css) +
          '&profile=css3&usermedium=all&warning=1&vextwarning='

        document.querySelector('a.validation.html').href = 
          'https://validator.w3.org/nu/?doc=' +
          encodeURIComponent(document.querySelector('html'))
      } catch (e) {
        // this will fail before page fully loads, and we can be silent about that
      }

编辑#2

我已经开始工作了。唯一的问题是它使用“弹出窗口”而不是像target="blank" 那样默默地打开一个窗口。我正在使用 onlick 方法：

get_html_validation: function () {
    let fd = new FormData()
    fd.append('fragment', '<!DOCTYPE html>' + 
      document.querySelector('html').outerHTML)
    fd.append('prefill', 0)
    fd.append('doctype', 'Inline')
    fd.append('prefill_doctype', 'html401')
    fd.append('group', 0)

    axios.post("https://validator.w3.org/nu/#textarea", fd)
      .then(response => {
        let win=window.open('about:blank')
        console.log(win)
        with(win.document)
        {
          open()
          write(response.data)
          close()
        }
      })
      .catch(e => console.error(e))
  }

原创

我想以编程方式使用这些验证器：

——如果您将 URL 作为参数传递，它们就可以正常工作，只要文档没有操纵 dom 的 javascript。但是……我的有。

如何处理这些网站的自定义 html 以检查在浏览器中使用 javascript 的情况？我想做类似的事情：

onValidateDOM = () => {
  let toValidate = '<!DOCTYPE html>' + document.querySelector('html').outerHTML
  let returnURLs = []
  returnURLs.push(w3cCSS.validate(toValidate), w3cHTML.validate(toValidate)
  return returnURLs
}

【问题讨论】：

@PatrickBarr 你的意思是把评论留在别的地方吗？
不，抱歉我在编辑之前误解了您的问题
nps，很高兴我当时编辑了它:)
以与他们的“Check by”text input 相同的方式将数据发布给他们怎么样？
好像有一个HTML Validator API 和一个CSS Validator API

标签： javascript validation web-crawler

【解决方案1】：

将传递给encodeURIComponent()的toValidate设置为doc=查询的值

fetch(`https://validator.w3.org/nu/?doc=${encodeURIComponent(toValidate)}`)
.then(response => response.text())
.then(text => console.log(text));

【讨论】：

嗯，不幸的是没有。 doc 参数接受 URL，而不是文件中的 html
@robertotomás 显然 jigsaw.w3.org/css-validator/validator 不与 Access-Control-Allow-Origin 标头一起提供。尽管在var fd = new FormData(); fd.append("text", "body {color: red;}"); fetch("https://jigsaw.w3.org/css-validator/validator", {method:"POST", body:fd}) .then(response => response.text()) .then(text => console.log(text)) 域中可能会出现以下情况，但应使用jsfiddle.net/6ujqempv。您可以尝试使用YQL 提出请求
我注意到我可以使用 text= 并为 css 验证器传递 urlencoded CSS。所以一倒！编辑：添加实际代码发布）