HTML 文字列を React の JSX で使える構文におおよそ変換します。
- 依存ライブラリゼロ
- 正規表現の文字列マッチングと replace 関数のみなので軽量で高速
- 厳密な構文処理ではないので未実装のパターンは処理されない
$ npm i jsxlikeimport jsxlike from "jsxlike"
const htmlStr = `<p class="aaa">bbb</p>`
console.log(jsxlike(htmlStr, {} /* options */))
// => <p className="aaa">bbb</p>const defaultOptions = {
extractTags: [],
mapAttrs: {
class: "className",
charset: "charSet",
for: "htmlFor",
tabindex: "tabIndex",
readonly: "readOnly",
maxlength: "maxLength",
colspan: "colSpan",
rowspan: "rowSpan",
cellspacing: "cellSpacing",
cellpadding: "cellPadding",
usemap: "useMap",
frameborder: "frameBorder",
"xlink:href": "href",
},
styleAttrs: true,
styleTags: true,
scriptTags: true,
commentTags: true,
voidTags: ["meta", "link", "img", "input", "br", "wbr", "hr"],
shortTags: ["*"],
absolutePath: "",
absoluteAttrs: {
link: ["href"],
script: ["src"],
img: ["src"],
use: ["xlink:href", "href"],
},
}type: string[]
特定の HTML タグを抽出できます。例えば ["link", "script"] とすることで <link /> <script /> タグのみを出力できます。
type: { [attr: string]: string }
属性名 attr を value に置換する設定。オプションを設定するとデフォルトオプションとマージされます。
type: boolean
スタイル属性を置換するか否か。
type: boolean | "erase"
スタイルタグを置換するか否か。または erase にすることで除去します。
type: boolean | "erase"
スクリプトタグを置換するか否か。または erase にすることで除去します。
type: boolean | "erase"
コメントタグを置換するか否か。または erase にすることで除去します。
type: string[]
設定した空要素に閉じスラッシュを追加します。
type: string[]
設定した要素に子要素がない場合は閉じタグを省略します。配列に * を含むとすべての要素が対象となります。
type: string
URL を設定するとルートパスが絶対パスに置換されます。
type: { [tagName: string]: string[] }
絶対パスに置換するタグと属性を指定します。
jsxlike にエスケープ処理は含まれていません。ユーザーの入力を含んだ実行結果をそのままブラウザでレンダリングすると XSS の脆弱性に繋がる可能性があります。そういった場合はレンダリング前にサニタイジングを追加してください。
- MIT