Non Programming Manager

    nodify-string

    1.1.1 • Public • Published

    nodify-string

    npm npm bundle size (minified) npm

    👟 Convert HTML strings into DOM nodes without innerHTML

    Why?

    nodify-string was created to be used in conjunction with Marked.js. The library converts markdown into an HTML string. In most scenarios, that HTML string is then added to the DOM using an element's innerHTML method. However, there are possible security risks with using innerHTML.

    To avoid those risks, nodify-string converts an HTML string like the one generated from Marked.js into a NodeList or Array. The output can then be appended to a parent element using the appendChild method.

    Install

    Get CDN from UNPKG:

    <script src="https://unpkg.com/nodify-string"></script>

    Install via npm or yarn:

    npm install --save nodify-string
     
    # or 
     
    yarn add nodify-string

    Docs

    Basic

    Add nodify-string to your list of scripts at the bottom of your HTML document. Then call the nodifyString function and pass it an HTML string to nodify. Once you have your list, loop over it and append each node to a parent element.

    <!-- index.html -->
    <body>
        <div id="output"></div>
     
        <script src="https://unpkg.com/nodify-string"></script> 
        <script>
            const target = document.getElementById('output')
            const greeting = '<h1>Hello world!</h1>'
            nodifyString(greeting).forEach(node =>
                target.appendChild(node)
            )
        </script> 
    </body>

    Use with Marked.js

    Add both nodify-string and Marked.js to your document. Then go through the same process with the output from the marked function.

    <!-- index.html -->
    <body>
        <div id="output"></div>
     
        <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> 
        <script src="https://unpkg.com/nodify-string"></script> 
        <script>
            const target = document.getElementById('output')
            const greeting = '# Hello world'
            const htmlString = marked(greeting)
            nodifyString(htmlString).forEach(node =>
                target.appendChild(node)
            )
        </script> 
    </body>

    Settings

    An optional second argument passed to the nodifyString function is a settings object. As of the current version, there is only one option: array.

    nodifyString('<h1>Hello!</h1>', {
        array: boolean
        // Returns the nodes in an array
    })

    By default, nodifyString will return a NodeList.

    License

    MIT

    Install

    npm i nodify-string

    DownloadsWeekly Downloads

    4

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    10.3 kB

    Total Files

    7

    Last publish

    Collaborators

    • seanmcp