W3C Html Validator in my textArea

Я разрабатываю сайт, на котором пользователь может написать описание в текстовом поле. Это описание может быть похоже на html-контент со всеми тегами html (<b></b><a href=''/> etc...).W3C Html Validator in my textArea

Иногда пользователь совершает ошибки (например, написание <a href='"/> или не закрывает теги), и когда это описание отображается на моем веб-сайте, он разбивает всю страницу.

Я ищу библиотеку javascript или другой инструмент для проверки содержимого textarea. Что-то похожее на 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); 
     } 
    }); 
})

источник

2016-09-28 dpfauwadel

Это на самом деле не так просто. Вы могли бы проанализировать ввод, извлекая каждую пару тегов (или самозакрывающийся тег) и анализируя это с помощью некоторого регулярного выражения. – Chris

На самом деле это очень плохая идея, чтобы пользователи могли использовать все теги html, потому что вы разрешаете XSS в своем приложении. –

В то время как вы сказали, что вы хотите задачу, выполняемую в стороне вашего сайта, я не уверен, если вы найдете этот подход непригоден. В принципе, вы можете использовать форму на своем сайте, которая затем отправляется в API.

Здесь я только что использовал обычную форму submit (например, не 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>

источник

2016-09-28 16:46:30 enhzflep

Это может работать с некоторыми мастерить, но здесь идет. Используйте W3C validator API

Когда пользователь записывает описание в текстовое поле, используйте ajax для отправки этого содержимого в скрипт. В сценарии backend сохраните содержимое textarea в .html-файле (скажем, textarea.html), который является общедоступным.

Затем, в том же сценарии после того, как файл был сохранен, отправить CURL запрос W3C Validator API, используя URL в файл .html вашего сохраненного контента в:

$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, и он возвращает ответ JSON, содержащий все ошибки, обнаруженные в URI параметра запроса.

источник

2016-09-28 15:08:38

Привет, спасибо за документы API Validator. С ними я смог объединить подход только для входа. – enhzflep

Если вы хотите проверить, действительно ли оно отклонено, если нет (не автоматическое исправление или выполнение какого-либо выделения ошибки), то разумно эффективным способом проверить это будет использование некоторой XML-синтаксической библиотеки для синтаксического анализа нижняя копия. Если синтаксический анализ завершился неудачей, значит, это скорее неверный html.

Возможно, не все допустимые строки html5 пройдут тест, но уверенное использование могло бы записать его более вежливо из-за прохождения теста.

Пример в NodeJS с помощью xml2json:

#!/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

источник

2016-09-28 15:53:37 bitifet

ответ

Смежные вопросы