Check If HTML Snippet Is Valid with JavaScript

Check if a string is html or not

A better regex to use to check if a string is HTML is:

/^/

For example:

/^/.test('') // true
/^/.test('foo bar baz') //true
/^/.test('<p>fizz buzz</p>') //true

In fact, it's so good, that it'll return true for every string passed to it, which is because every string is HTML. Seriously, even if it's poorly formatted or invalid, it's still HTML.

If what you're looking for is the presence of HTML elements, rather than simply any text content, you could use something along the lines of:

/<\/?[a-z][\s\S]*>/i.test()

It won't help you parse the HTML in any way, but it will certainly flag the string as containing HTML elements.

How to validate HTML content with multiple variables put inside a string

To make it one degree less complicated, you can use single quotes to wrap class or style declarations and double quotes to wrap the overall html (or vice versa).

In this piece of html, I observed issued at closing of </h6> and in the class declaration of last anchor tag.

issuesList.innerHTML += "<div class='well'>" +
        "<h6> Issue Id:" + id + "</h6>" +
        "<p><span class='label label-info'>" + status + "</span></p>" +
        "<h3>" + desc + "</h3>" +
        "<p><span class='glyphicon glyphicon-time'>" + severity + "</span></p>" +
        "<p><span class='glyphicon glyphicon-user'>" + assignedTo + "</span></p>" +
        "<a href='#'  onclick= 'setStatusClosed(\"" + id + "\")'   class='btn btn-warning'>Close</a>" +
        "<a href='#' onclick='deleteIssue( \"" + id + "\")'  class='btn btn-danger'>Delete</a>" +
        "</div>";

You may use following function to validate the html so created:

function validator(createdhtml) {
    var tempdiv = document.createElement('div');
    tempdiv.innerHTML = createdhtml;
    return tempdiv.innerHTML;
}

Further I recommend reading:
check-if-html-snippet-is-valid

Is there any Javascript library that can validate html?

First things first. I would be severely re-miss if I failed to point out that accepting raw HTML from your users is, generally-speaking, not a good idea™.

Doing this incorrectly (and it is an extremely difficult task to do correctly) leaves your site, and your users, open to many vulnerabilities. You can view a partial list of them at https://html5sec.org/ (I say partial because they're only listing the "known" attack vectors). There are a lot of good answers to a seemingly-unrelated, but definitely semi-related question and I strongly recommend that you read them all.

"But @Pete!", I hear you cry, "My users are trustworthy. They won't try to click-jack my other users, or do anything else malicious or untowards!"

You may be suffering under the delusion that everyone who uses your site will not be malicious, or will even be using a browser to submit HTML to your site (so don't forget server-side validation and sanitization).

Then again, you may not be deluded and your userbase has a vested interest in only submitting safe HTML for your site. Maybe you've already considered, and implemented, bullet-proof client-side and server-side validation and sanitization routines. I don't know your exact circumstances and I won't pretend to (although I do know the probabilities involved here are not in your favor).

With all of the above in mind, if you still insist on allowing a user to write and submit raw HTML to your site, consider:

• using the documentation found at https://validator.w3.org/docs/api.html to fire off an AJAX request and validate the HTML being submitted;
• using a plugin/library for a Rich Text Editor that lets the user enter in formatted text like they would in a word processor and gives you a resulting HTML string to send to your server.
• using a plugin/library for a Markdown parser (like the one you use here at SO).

You could also just convert the user's HTML to a DOM element (allowing the browser to parse the HTML into an actual DOM element) and then grab the [parsed] HTML string back:

window.addEventListener('load', function () {    var textarea = document.getElementById('unsafe-html');    var button = document.getElementById('get-unsafe-html');    var getUnsafeHtml = function getUnsafeHtml() {        var div = document.createElement('div');        div.innerHTML = textarea.value; // parses HTML to DOM elements        return div.innerHTML; // gets it back in a string form.    }            button.addEventListener('click', function (e) {        var unsafeHtml = getUnsafeHtml();        console.log(unsafeHtml);                e.preventDefault();        return false;    }, false);}, false);

<textarea id="unsafe-html" rows="5">    <p>If you <strong>insist</strong>, <i>then</i> this technique can be used as well.</p></textarea><button id="get-unsafe-html">Get the HTML</button>

How to check if the given string is a valid 'PropertyName' and 'PropertyValue' for the style attribute of an HTML element?

The idea is applying the style and checking for its existence. This function can use some improvements but it works or at least demonstrates the concept.

function is_valid_css_prop(prop, value) {
  var div = document.createElement("div");
  document.body.appendChild(div)
  div.style[prop] = value;
  var obj = getComputedStyle(div);

  var found = false;
  for (var key in obj) {
    if (key == prop && value == obj[key]) {
      found = true;
      break;
    }
  }
  document.body.removeChild(div)
  return found;
}

console.log(is_valid_css_prop("position", "above"));
console.log(is_valid_css_prop("position", "absolute"));

---

Related Topics