在我的textArea中的W3C Html验证器

这可能需要一些修修补补。使用W3C验证器API

当用户在文本区写入描述时，使用ajax将该内容发送到后端脚本。在后端脚本中，将textarea内容保存到一个可公开访问的.html文件中(例如textarea.html)。

然后，在相同的脚本文件保存后，发送CURL请求到W3C Validator API，使用您保存的内容的。html文件的URL:

$filepath        = '/mycontent/textarea.html';
$current_content = file_get_contents($filepath);//if you need the old content for some reason
$new_content     = $_GET['textarea_content'];
file_put_contents($new_content, $filepath);
// now use the validator
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "https://validator.w3.org/check?uri=http://www.myproject.com/mycontent/textarea.html/&output=json");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$output = json_decode(curl_exec($ch), 1);
curl_close($ch);

然后解析JSON(即$output)以查看是否有错误。我个人尝试过这个API，它确实返回一个JSON响应，其中包含在您的查询参数的URI中发现的所有错误。

当你说你想在你的网站上执行任务时，我不确定你是否会发现这种方法不合适。基本上，您可以在您的站点上使用表单，然后将其提交给API。

在这里，我只是使用了一个普通的表单提交(即，不是ajax)，所以用户最终会在验证器的站点上显示结果。但是，如果您要通过ajax提交并显式请求JSON输出，则也可以显示结果。

我使用了以下几个链接:https://github.com/validator/validator/wiki/Service%3A-Input%3A-textareahttps://github.com/validator/validator/wiki/Service%3A-Common-parameters

并产生了这个:

<form id='mForm' method='post' action='http://validator.w3.org/nu/' enctype='multipart/form-data'>
    <button type='submit'>Submit</button>
    <textarea id='checkMe' name='content'></textarea>
</form>

从第一个链接:必须确保content字段是提交的最后一个字段

但是，这不是很令人满意。我们肯定能做得更好吧?所以我继续阅读，并意识到实现ajax解决方案并不需要太多的工作，所以我把一个快速而又讨厌的解决方案放在一起。您可以选择要使用的验证器，并将响应作为JSON返回，我将其简单地填充到div中。您应该解析JSON并创建结构化的错误/成功消息。

这里有一个可以在页面上工作的实时演示:

function byId(id){return document.getElementById(id)}
function ajaxPostForm(url, formElem, onSuccess, onError)
{
	var ajax = new XMLHttpRequest();
	ajax.onreadystatechange = function(){if (this.readyState==4 && this.status==200)onSuccess(this);}
	ajax.onerror = function(){error.log("AJAX request failed to: "+url);onError(this);}
	ajax.open("POST", url, true);
	var formData = new FormData(formElem);
	ajax.send( formData );
}
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
window.addEventListener('load', onDocLoaded, false);
function onDocLoaded(evt)
{
	byId('goBtn').addEventListener('click', onGoBtnClicked);
}
function onGoBtnClicked(evt)
{
	ajaxPostForm('http://validator.w3.org/nu/', byId('mForm'), onAjaxOk, onAjaxFail);
	
	function onAjaxOk(ajax)
	{
		byId('ajaxResult').textContent = ajax.response;
	}
	
	function onAjaxFail(ajax)
	{
		alert("bugger. No idea what happened here - I should've bother error checking :p..");
	}
}

textarea
{
	width: 500px;
	height: 400px;
}

	<h3>Enter code to be validated by w3c</h3>
	<form id='mForm' method='post' action='http://validator.w3.org/nu/' enctype='multipart/form-data'>
		<input type='hidden' name='out' value='json'/>
		<textarea id='checkMe' name='content'></textarea><br>
		<select name='parser'>
			<option value='none'>Select Parser</option>
			<option value='xml'>XML parser, will not load external entities</option>
			<option value='xmldtd'>XML parser, will load external entities</option>
			<option value='html'>HTML parser, configuration is based on doctype.</option>
			<option value='html5'>HTML parser in the HTML5 mode.</option>
			<option value='html4'>HTML parser in the HTML4 strict mode.</option>
			<option value='html4tr'>HTML parser in the HTML4 transitional mode.</option>
		</select>
	</form>
	<button id='goBtn'>Submit</button>
	<hr>
	<div id='ajaxResult'></div>

如果您只想检查它是否有效而拒绝它(不自动修复它或执行某种错误高亮显示)，那么检查它的一种合理有效的方法是使用一些xml解析库来解析它的小写副本。如果解析失败，那么很可能是无效的html。

也许不是所有有效的html5字符串都能通过测试，但肯定可以用更礼貌的方式来写，因为通过了测试。

使用xml2json的NodeJS示例:

#!/usr/bin/env node
// REQUIRES: npm install xml2json
var x2j = require("xml2json").toJson;

function checkHtml(src) {
    try {
        x2j("<data>"+String(src).toLowerCase()+"</data>");
    } catch (err) {
        return false;
    };
    return true;
};
[   
    "<b>Hello World!!</B>",
    "<b>Hello World!!</ B>",
].map(function(html){
    console.log (html, checkHtml(html));
});
// Output:
// -------
// <b>Hello World!!</B> true
// <b>Hello World!!</ B> false