私はユーザーがテキストエリアに説明を書くことができるウェブサイトを開発しています。この説明は、すべてのhtmlタグ(<b></b><a href=''/> etc...
)を含むhtmlコンテンツのようになります。W3C Html Validator in my textArea
ユーザが間違いを犯すと(例:<a href='"/>
の書き込みやタグを閉じないなど)、ウェブサイトの説明がレンダリングされると、すべてのページが壊れます。
私は、テキストエリアの内容を検証するために、javascriptライブラリや他のツールを探しています。 jsfiddleと似ているが、私のウェブサイトにある。
おかげ
UPDATE
私のアプリと連携するために、私は、プロセスを簡素化します。ここでは、コード
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>
Javascriptを
<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);
}
});
})
これは実際にはそれほど単純ではありません。おそらく、各タグのペア(または自己閉じタグ)を抽出し、それを正規表現で解析して入力を解析することができます。 – Chris
実際には、アプリケーションでXSSを許可しているので、ユーザーがすべてのHTMLタグを使用できるようにすることは非常に悪い考えです。 –