Giter VIP home page Giter VIP logo

html-escape-unescape's Introduction

html-escape-unescape

Build Status

A lightweight library to meet all your HTML encoding/decoding needs, in Angular, using the power of pipes. ๐ŸŽฏ

Installation

npm install -S html-escape-unescape

If you are using npm version v5.0.0 or above, you may omit the '-S' flag because npm now automatically updates your package.json and package-lock.json.

Usage

  1. Import into your.module.ts
import { HTMLEscapeUnescapeModule } from 'html-escape-unescape'

// and  add in your module's declarations array 
imports: [ 
    HTMLEscapeUnescapeModule 
    ]
  1. Start using the pipes Using html-escape-unescape is as easy as piping your value to the appropriate pipe in your.component.html.
{{ someStringToBeEscaped | escape }}
{{ someStringToBeUnescaped | unescape }}

Yay! it works. ๐ŸŽ‰

This will do for most of the use cases.

But that's not it, there's more

Escape/Unescape strings multiple times

Sometimes you need to escape a string multiple times. Consider the following case:

let str = "<strong>Yo</strong>";

Here str is a doubly HTML encoded string. So, to decode it, you need to unescape it twice.

The string str when HTML decoded once, using the unescape pipe gives <strong>Yo</strong>

Passing the result through the unescape pipe again, would result in: <strong>Yo</strong>

You can do it in a better way

To unescape a string N times, just pass in a number as a parameter. Where N is the number of times you want the pipe to be chained.

{{ someStringToBeUnescapedNtimes | unescape:N }}

And the same goes for escaping

{{ someStringToBeEscapedNtimes | escape:N }}

What if you don't know how many times a string has been encoded?๐Ÿง

It is, often, difficult to determine how many times a string was HTML encoded, or there can be inputs which are encoded for non-deterministic/variable number of times.

Ask the pipe to be recursive ๐Ÿ˜Ž

Use the 'recursive' parameter with the unescape pipe and let it do the rest. For any string which was encoded unknown number of times, the recursive parameter to the unescape pipe will unescape the text untill it is fully unescaped to readable HTML text.

{{ someStringToBeUnescaped?times | unescape:'recursive' }}

Upcoming ๐Ÿ

A stand alone npm package which can be used in any Javascript runtime. Therefore it would be usable in Angular, React, NodeJS, etc.

Troubleshooting

Please follow these guidelines when reporting bugs and feature requests:

  1. Use GitHub Issues board to report bugs and feature requests (not our email address)
  2. Please always write steps to reproduce the error. That way we can focus on fixing the bug, not scratching our heads trying to reproduce it.

Thanks for understanding!

License

The MIT License (see the LICENSE file for the full text)

html-escape-unescape's People

Contributors

dependabot[bot] avatar jskrnbindra avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

sknapchuck

html-escape-unescape's Issues

NPM install is failing with gradle build

It is working fine when i an doing it using npm install but failing with error when doing same using gradle build.

Date: 2018-08-15T14:55:54.105Z[2m 12s]
Hash: c0b0517e6acca9d5c08corer-frontend:npm_run_build
Time: 24446ms
chunk {0} styles.8aa95f48d192b815dbee.bundle.css (styles) 133 kB [initial] [rendered]
chunk {1} polyfills.997d8cc03812de50ae67.bundle.js (polyfills) 84 bytes [initial] [rendered]
chunk {2} main.ee32620ecd1edff94184.bundle.js (main) 84 bytes [initial] [rendered]
chunk {3} inline.318b50c57b4eba3d437b.bundle.js (inline) 796 bytes [entry] [rendered]

ERROR in : Unexpected value 'undefined' exported by the module 'HTMLEscapeUnescapeModule in D:/code/poc/common-libs/novus-datastore-explorer/novus-datastore-explorer-frontend/node_modules/html-escape-unescape/html-escape-unescape.d.ts'

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: ng build --prod
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\mduhan\AppData\Roaming\npm-cache_logs\2018-08-15T14_55_54_176Z-debug.log

:../novus-datastore-explorer-frontend:npm_run_build (Thread[Daemon worker Thread 4,5,main]) completed. Took 1 mins 8.942 secs.

FAILURE: Build failed with an exception.

Gradle details ๐Ÿ‘Ž

plugins {
id "com.moowork.node" version "0.13"
}

// configure gradle-node-plugin
node {
version = '8.9.1'
npmVersion = '6.2.0'
download = true
workDir = file("${project.projectDir}/node")
nodeModulesDir = file("${project.projectDir}/")
}

// clean node/node_modules/dist
task npmClean(type: Delete) {
final def webDir = "${rootDir}/products-web"
delete "${webDir}/node"
delete "${webDir}/node_modules"
delete "${webDir}/dist"
delete "${webDir}/coverage"
}

// clean task for npm
task clean {}
clean.dependsOn(npmClean)

// build task for npm
task build {}
build.dependsOn(npm_install)
build.dependsOn(npm_run_build)

// assemble task for npm
task assemble {}
assemble.dependsOn(build)

// check task for npm
task check {}
check.dependsOn(npm_run_test)

// run all task
task runAll{}
runAll.dependsOn(npm_run_start)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.