2016-09-28 7 views
0

私はユーザーがテキストエリアに説明を書くことができるウェブサイトを開発しています。この説明は、すべての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); 
     } 
    }); 
}) 

+0

これは実際にはそれほど単純ではありません。おそらく、各タグのペア(または自己閉じタグ)を抽出し、それを正規表現で解析して入力を解析することができます。 – Chris

+1

実際には、アプリケーションでXSSを許可しているので、ユーザーがすべてのHTMLタグを使用できるようにすることは非常に悪い考えです。 –

答えて

0

あなたはタスクは、Webサイト側で実行したいと言ってきましたが、私はあなたがこのアプローチが不適当見つけるかはわかりません。基本的には、サイト上のフォームを使用してAPIに送信することができます。

ここでは、通常のフォーム送信(つまり、ajaxではない)を使用しているため、結果が表示されたバリデーターサイトでユーザーが終了します。しかし、あなたがajax経由で提出し、JSON出力を明示的に求めていた場合は、結果を表示することもできます。

私はリンクの次のカップル使用: https://github.com/validator/validator/wiki/Service%3A-Input%3A-textarea https://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> 

を: あなたはコンテンツフィールドがで最後のフィールドであることを確認する必要があります提出

しかし、これはあまり満足できるものではありません。確かに私たちはより良くすることができますか? 私は読書を続けて、ajaxソリューションを実装するのはあまり仕事ではないことに気がついたので、素早くn厄介なものを一緒に投げました。使用するバリデータを選ぶことができ、JSONとして応答を返すことができます。これは単にdivに含まれています。 JSONを解析し、構造化エラー/成功メッセージを作成する必要があります。

ここではページ上で右ここで働くライブデモです:

function byId(id){return document.getElementById(id)} 
 

 
function ajaxPostForm(url, formElem, onSuccess, onError) 
 
{ 
 
\t var ajax = new XMLHttpRequest(); 
 
\t ajax.onreadystatechange = function(){if (this.readyState==4 && this.status==200)onSuccess(this);} 
 
\t ajax.onerror = function(){error.log("AJAX request failed to: "+url);onError(this);} 
 
\t ajax.open("POST", url, true); 
 
\t var formData = new FormData(formElem); 
 
\t ajax.send(formData); 
 
} 
 

 

 
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 
 
window.addEventListener('load', onDocLoaded, false); 
 

 
function onDocLoaded(evt) 
 
{ 
 
\t byId('goBtn').addEventListener('click', onGoBtnClicked); 
 
} 
 

 
function onGoBtnClicked(evt) 
 
{ 
 
\t ajaxPostForm('http://validator.w3.org/nu/', byId('mForm'), onAjaxOk, onAjaxFail); 
 
\t 
 
\t function onAjaxOk(ajax) 
 
\t { 
 
\t \t byId('ajaxResult').textContent = ajax.response; 
 
\t } 
 
\t 
 
\t function onAjaxFail(ajax) 
 
\t { 
 
\t \t alert("bugger. No idea what happened here - I should've bother error checking :p.."); 
 
\t } 
 
}
textarea 
 
{ 
 
\t width: 500px; 
 
\t height: 400px; 
 
}
\t <h3>Enter code to be validated by w3c</h3> 
 
\t <form id='mForm' method='post' action='http://validator.w3.org/nu/' enctype='multipart/form-data'> 
 
\t \t <input type='hidden' name='out' value='json'/> 
 
\t \t <textarea id='checkMe' name='content'></textarea><br> 
 
\t \t <select name='parser'> 
 
\t \t \t <option value='none'>Select Parser</option> 
 
\t \t \t <option value='xml'>XML parser, will not load external entities</option> 
 
\t \t \t <option value='xmldtd'>XML parser, will load external entities</option> 
 
\t \t \t <option value='html'>HTML parser, configuration is based on doctype.</option> 
 
\t \t \t <option value='html5'>HTML parser in the HTML5 mode.</option> 
 
\t \t \t <option value='html4'>HTML parser in the HTML4 strict mode.</option> 
 
\t \t \t <option value='html4tr'>HTML parser in the HTML4 transitional mode.</option> 
 
\t \t </select> 
 
\t </form> 
 
\t <button id='goBtn'>Submit</button> 
 
\t <hr> 
 
\t <div id='ajaxResult'></div>

1

これは、いくつかの工夫で動作しますが、ここに行くことがあります。 W3C validator API

ユーザがテキストエリアに説明を書き込むときに、ajaxを使用してこのコンテンツをバックエンドスクリプトに送信します。バックエンドスクリプトで、テキストエリアの内容を一般にアクセス可能な.htmlファイル(たとえばtextarea.html)に保存します。

すると、ファイルが保存されたコンテンツの.htmlのファイルのURLを使用して、W3C Validator APICURL要求を送信し、保存された後、同じスクリプトで:

$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(すなわち、$出力を解析)エラーがあるかどうかを確認します。私は個人的にこのAPIを試しましたが、クエリパラメータのURIにあるすべてのエラーを含むJSONレスポンスを返します。

+1

ねえ、Validator APIドキュメントに感謝します。彼らと一緒に、私はフロントエンドのみのアプローチを一緒に投げることができました。 – enhzflep

0

もし自動的にそれを修正したり、何らかのエラー強調表示を行わないと拒否するのが有効かどうかチェックしたいのであれば、それをチェックする合理的に効率的な方法は、いくつかの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 
関連する問題