nodify-string
v1.1.1
Published
A utility for converting HTML strings into DOM nodes without innerHTML.
Downloads
23
Maintainers
seanmcpReadme
nodify-string
👟 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-stringDocs
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.