Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including detect-is-it-html-or-xhtml with all npm packages installed. Try it out:

var detectIsItHtmlOrXhtml = require("detect-is-it-html-or-xhtml")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

detect-is-it-html-or-xhtml v3.9.57

Answers, is the string input string more an HTML or XHTML (or neither)

detect-is-it-html-or-xhtml

Answers, is the string input string more an HTML or XHTML (or neither)

Repository is on GitLab Coverage no dependencies Downloads/Month Test in browser Code style: prettier MIT License

Table of Contents

Install

npm i detect-is-it-html-or-xhtml

The default is exported, so instead of "detectIsItHTMLOrXhtml" below, you can name the consumed function however you want.

Consume via a require():

const detectIsItHTMLOrXhtml = require("detect-is-it-html-or-xhtml");

or as an ES Module:

import detectIsItHTMLOrXhtml from "detect-is-it-html-or-xhtml";

or for web pages, as a production-ready minified script file (so-called "UMD build"), straight from CDN:

<script src="https://cdn.jsdelivr.net/npm/detect-is-it-html-or-xhtml/dist/detect-is-it-html-or-xhtml.umd.js"></script>
// in which case you get a global variable "detectIsItHtmlOrXhtml" which you consume like this:
const detectIsItHTMLOrXhtml = detectIsItHtmlOrXhtml;

This package has three builds in dist/ folder:

TypeKey in package.jsonPathSize
Main export - CommonJS version, transpiled to ES5, contains require and module.exportsmaindist/detect-is-it-html-or-xhtml.cjs.js2 KB
ES module build that Webpack/Rollup understands. Untranspiled ES6 code with import/export.moduledist/detect-is-it-html-or-xhtml.esm.js2 KB
UMD build for browsers, transpiled, minified, containing iife's and has all dependencies baked-inbrowserdist/detect-is-it-html-or-xhtml.umd.js1 KB

⬆ back to top

Example

const detect = require("detect-is-it-html-or-xhtml");
console.log(
  detect(
    '<img src="some.jpg" width="zzz" height="zzz" border="0" style="display:block;" alt="zzz"/>'
  )
);
// => 'xhtml'

⬆ back to top

Purpose

As you know, XHTML is slightly different from HTML: HTML (4 and 5) does not close the <img> and other single tags, while XHTML does. There are more to that, but that's the major thing from developer's perspective.

When I was working on the email-comb, I was parsing the HTML and rendering it back. Upon this rendering-back stage, I had to identify, is the source code of the HTML-type, or XHTML, because I had to instruct the renderer to close all the single tags (or not close them). Ignoring this setting would have nasty consequences because, roughly, in only half of the cases my library would produce the correct code.

I couldn't find any library that analyses the code, telling is it HTML or XHTML. That's how detect-is-it-html-or-xhtml was born.

Feed the string into this library. If it's more of an HTML, it will output a string "html". If it's more of an XHTML, it will output a string xhtml. If your code doesn't contain any tags, or it does, but there is no doctype, and it's impossible to distinguish between the two, it will output null.

⬆ back to top

API

detect(
  htmlAsString // Some code in string format. Or some other string.
);
// => 'html'|'xhtml'|null

API - Input

Input argumentTypeObligatory?Description
htmlAsStringStringyesString, hopefully containing some HTML code

If the input is not String type, this package will throw an error. If the input is missing completely, it will return null.

⬆ back to top

API - Output

TypeValueDescription
String or null'html', 'xhtml' or nullIdentified type of your input

⬆ back to top

Under the hood

The algorithm is the following:

  1. Look for doctype. If recognised, Bob's your uncle, here's your answer.
  2. IF there's no doctype or it's messed up beyond recognition, DO scan all singleton tags (<img>, <br> and <hr>) and see which type the majority is (closed or not closed).
  3. In a rare case when there is an equal amount of both closed and unclosed tags, lean for html.
  4. If (there are no tags in the input) OR (there are no doctype tags and no singleton tags), return null.

⬆ back to top

Contributing

  • If you see an error, raise an issue.
  • If you want a new feature but can't code it up yourself, also raise an issue. Let's discuss it.
  • If you tried to use this package, but something didn't work out, also raise an issue. We'll try to help.
  • If you want to contribute some code, fork the monorepo via GitLab, then write code, then file a pull request on GitLab. We'll merge it in and release.

In monorepo, npm libraries are located in packages/ folder. Inside, the source code is located either in src/ folder (normal npm library) or in the root, cli.js (if it's a command-line application).

The npm script "dev", the "dev": "rollup -c --dev" builds the development version retaining all console.logs with row numbers. It's handy to have js-row-num-cli installed globally so you can automatically update the row numbers on all console.logs.

⬆ back to top

Licence

MIT License

Copyright (c) 2015-2020 Roy Revelt and other contributors

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free