我的textArea中的W3C HTML验证程序
[英]W3C Html Validator inside my textArea
问题描述
我正在开发一个网站，用户可以在其中编写文字描述。 此描述可能像是带有所有html标签（ <b></b><a href=''/> etc... ）的html内容。
有时，用户会犯错误（例如写<a href='"/>或不关闭标签），并且当描述在我的网站上呈现时，它会破坏整个页面。
我正在寻找一个javascript库或其他工具来验证textarea内容。 与jsfiddle类似，但在我的网站中。
谢谢
更新
为了使用我的应用程序，我简化了过程。 这是代码
的HTML
<div>
<div class="row">
<textarea id="idTextArea" style="width:300px; height:100px;"></textarea>
<button class="btn btn-default" id="idButton">Validate</button>
</div>
</div>
Java脚本
<script type="text/javascript">
$("#idButton").click(function () {
var textToTest = "<!DOCTYPE html><html><head><title>Test</title></head><body>" + $("#idTextArea").val() + "</body></html>";
// emulate form post
var formData = new FormData();
formData.append('out', 'json');
formData.append('content', textToTest);
// make ajax call
$.ajax({
url: "http://html5.validator.nu/",
data: formData,
dataType: "json",
type: "POST",
processData: false,
contentType: false,
success: function (data) {
var text = "";
for(var i = 0; i < data.messages.length; i++)
{
var extract = data.messages[i].extract;
var firstColumn = data.messages[i].firstColumn;
var hiliteStart = data.messages[i].hiliteStart;
var hiliteLength = data.messages[i].hiliteLength;
var lastColumn = data.messages[i].lastColumn;
var lastLine = data.messages[i].lastLine;
var type = data.messages[i].type;
var message = data.messages[i].message;
text += "Type : " + type;
text += "Message : " + message;
}
if (text.length > 0) {
alert(text);
}
},
error: function () {
alert(arguments);
}
});
})
3 个解决方案
解决方案1
1 2016-09-28 15:08:38
这可能需要一些修改，但是可以解决。 使用W3C验证程序API
当用户在文本区域中编写描述时，请使用ajax将此内容发送到后端脚本。 在后端脚本中，将textarea内容保存到可公开访问的.html文件（例如textarea.html）中。
然后，在文件保存后的同一脚本中，使用保存的内容的.html文件的URL将CURL请求发送到W3C Validator API ：
$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中发现的所有错误。
解决方案2
0 2016-09-28 15:53:37
如果您只想检查拒绝它是否有效（不自动修复它或执行某种错误突出显示），那么一种比较有效的检查方法是使用一些xml解析库来解析一个小写的它。 如果解析失败，则很可能是无效的html。
也许并非所有有效的html5字符串都可以通过测试，但是由于通过了测试，因此请确保使用方式可以更礼貌地编写。
#!/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
解决方案3
0 已采纳 2016-09-28 16:46:30
虽然您已经说过要在网站上执行任务，但是我不确定是否会发现这种方法不合适。 基本上，您可以在网站上使用一个表单，然后将其提交给API。
在这里，我只是使用普通表单提交（即，不是ajax），因此用户最终会在验证器的站点上显示结果。 但是，如果要通过ajax提交并明确要求JSON输出，则也可以显示结果。
我使用了以下几个链接： https : //github.com/validator/validator/wiki/Service%3A-Input%3A-textarea https://github.com/validator/validator/wiki/Service%3A-Common -参数
并产生了这个：
<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>
从第一个链接： 必须确保内容字段是提交中的最后一个字段。
但是，这不是很令人满意。 当然可以做得更好？ 因此，我不断阅读并意识到实现一个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>
Vue js 和 W3C HTML 验证器
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.