dave-kennedy / clean-html Goto Github PK
View Code? Open in Web Editor NEWHTML cleaner and beautifier for Node
License: The Unlicense
HTML cleaner and beautifier for Node
License: The Unlicense
I have no idea why that made sense, but I don't see any way to change that, which is a shame because as much as I love prettier
, it takes 3 seconds to run on content that this library needs <0.1s for, so I'd much rather use this.
I'd like to remove every attribute that isn't src
or href
but I'm having a hard time figuring out regex that I can pass to this option to achieve that. Is this currently possible?
Thanks again for the great package and for your help in the past.
Example input:
<script type="text/javascript">
console.log('I prefer the concrete, the graspable, the proveable.');
</script>
Expected output:
<script type="text/javascript">
console.log('I prefer the concrete, the graspable, the proveable.');
</script>
Actual output:
<script type="text/javascript">
console.log('I prefer the
concrete, the graspable, the
proveable.');
</script>
The same issue applies to both style and script tags. Neither should be wrapped.
Example input:
<meta property="og:description" content="DuckDuckGo is the search engine that doesn't track you. We protect your search history from everyone – even us!">
Expected output:
<meta property="og:description" content="DuckDuckGo is the search engine that doesn't track you. We protect your
search history from everyone – even us!">
Actual output:
<meta property="og:description" content="DuckDuckGo is the search engine that doesn't track you. We protect your
search history from everyone – even us!">
Thanks for the excellent tool. I find when I paste more than 2 dozen or so lines, I get a maximum callstack exceeded error. Any thoughts of fixing this?
Thanks again!
as title
thanks
which is really import to me...
import $ from 'jquery'
import { clean } from 'clean-html'
const $code = $('code.api-preview')
const badHtml = $code.text()
const opts = {
'add-break-around-tags': ['figure', 'iframe', 'a', 'img', 'time', 'address', 'details', 'script', 'ul', 'ol', 'li'],
'wrap': 0
}
clean(badHtml, opts, (clearHtml) => {
$('code.api-preview').text(clearHtml)
.css('font-size', '14px')
.css('font-family', 'Hack, "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace')
.css('line-height', '20px')
})
now i need to replace style and style tag into ruby
tag, and replace it back after cleaning.
INTO this:
const $code = $('code')
const badHtml = $code.text()
.replace('<script', '<ruby')
.replace('\/script>', '\/ruby>')
.replace('<style', '<dialog')
.replace('\/style>', '\/dialog>')
const opts = {
'add-break-around-tags': [
'figure', 'iframe', 'a', 'img', 'time', 'address', 'details', 'script', 'ul', 'ol', 'li', 'ruby', 'dialog'
],
'wrap': 0
}
clean(badHtml, opts, (clearHtml) => {
let newClearHtml = clearHtml.replace('<ruby', '<script')
.replace('\/ruby>', '\/script>')
.replace('<dialog', '<style')
.replace('\/dialog>', '\/style>')
$('code.api-preview').text(newClearHtml)
.css('font-size', '14px')
.css('font-family', 'Hack, "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace')
.css('line-height', '20px')
})
would we made it remove-able by configure?
Hi Dave! 👋
It looks like this project was added to npm by someone named pajamaman – is that you? Is that package legit?
Just trying to be security conscious and all that.
Thanks!
Example input:
<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html lang="en_US" class="no-js iem7"> <![endif]-->
<!--[if lt IE 7]> <html class="ie6 lt-ie10 lt-ie9 lt-ie8 lt-ie7 no-js" lang="en_US"> <![endif]-->
<!--[if IE 7]> <html class="ie7 lt-ie10 lt-ie9 lt-ie8 no-js" lang="en_US"> <![endif]-->
<!--[if IE 8]> <html class="ie8 lt-ie10 lt-ie9 no-js" lang="en_US"> <![endif]-->
<!--[if IE 9]> <html class="ie9 lt-ie10 no-js" lang="en_US"> <![endif]-->
Expected output:
<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html lang="en_US" class="no-js iem7"> <![endif]-->
<!--[if lt IE 7]> <html class="ie6 lt-ie10 lt-ie9 lt-ie8 lt-ie7 no-js" lang="en_US"> <![endif]-->
<!--[if IE 7]> <html class="ie7 lt-ie10 lt-ie9 lt-ie8 no-js" lang="en_US"> <![endif]-->
<!--[if IE 8]> <html class="ie8 lt-ie10 lt-ie9 no-js" lang="en_US"> <![endif]-->
<!--[if IE 9]> <html class="ie9 lt-ie10 no-js" lang="en_US"> <![endif]-->
Actual output:
<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html lang="en_US" class="no-js iem7"> <![endif]-->
<!--[if lt IE 7]> <html class="ie6 lt-ie10 lt-ie9 lt-ie8 lt-ie7 no-js" lang="en_US"> <![endif]-->
<!--[if IE 7]> <html class="ie7 lt-ie10 lt-ie9 lt-ie8 no-js" lang="en_US"> <![endif]-->
<!--[if IE 8]> <html class="ie8 lt-ie10 lt-ie9 no-js" lang="en_US"> <![endif]-->
<!--[if IE 9]> <html class="ie9 lt-ie10 no-js" lang="en_US"> <![endif]-->
Because the html
tag is only closed once, there's a bunch of extra indentation at the end of the file.
When I use the remove-empty-tags
option with any tag, img
always gets removed.
<p><img alt="" src="https://github.githubassets.com/images/modules/dashboard/copilot/bg.jpg"></p>
It's regardless of self closing or not, if I use even picture
instead of img
. They get always removed. Seems like a whitelist is processed under the hood!?
Any idea @dave-kennedy ?
Currently, clean-html
transforms styles with whitespace into a clean wrapped set of lines, e.g.
<div style="
font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto;
height: 100dvh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #435d7b;
background-color: #d0b641;
gap: 20px;
">...</div>
to:
<div style=" font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto; height: 100dvh; display:
flex; flex-direction: column; align-items: center; justify-content: center; color: #435d7b; background-color:
#d0b641; gap: 20px; ">
...
</div>
However, it leaves a space before the first style and after the last style. Would it be possible to strip these, i.e.:
<div style="font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto; height: 100dvh; display:
flex; flex-direction: column; align-items: center; justify-content: center; color: #435d7b; background-color:
#d0b641; gap: 20px;">
...
</div>
Example input:
<!--
I prefer the concrete, the graspable, the proveable.
-->
Expected output (when wrap = 40):
<!-- I prefer the concrete, the
graspable, the proveable. -->
Actual output:
<!--
I prefer the concrete, the
graspable, the proveable.
-->
This is a great library. However, it still has some downsides:
@dave-kennedy What do you think of these problems and suggested changes?
node_modules/clean-html/index.js:251:10
you can check if nodes are array.. sth like
function render(nodes) {
var html = '';
nodes = nodes || []
nodes.forEach(function (node) {
...
Hello!
You have an excellent project!
I'm writing to you to ask if I can apply clean-html not to one file, but to all at once? And if the answer is yes, which command should I use to do this? I already tried clean-html **/*.html --in-place but it didn't work.
I am looking forward to your reply.
Sincerely.
Hi,
the library is cool, I just need it to be a bit more functional. From what I understand currently it does not provide the ability to remove-attributes
/ remove-tags
etc. by a pattern, so e.g. I want to remove all tags that match a pattern /abc-[a-z0-9]+/i
.
Is it possible to have a feature like that?
I noticed the main clean function in index.js has no return value, this makes it very difficult to compose in a chain of operations, i tried to get my project going for hours until i realized this was happening and i solved it by simply adding on return html
onto the end of the function clean
in index.js
. Is there any reason that this would break the program? I would like to submit this as a pull request but not sure if there is any compatibility issues. I think not.
Edited for clarity.
For instance, <path d="..."/>
becomes <path d="...">
(which is breaking, since the tag doesn't close).
Even <path d="..."> </path>
becomes <path d="...">
.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.