Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/qrac/jsxlike
Converting HTML to React JSX-like syntax
https://github.com/qrac/jsxlike
browser html2jsx htmltojsx japanese javascript jsx jsxlike react typescript
Last synced: 29 days ago
JSON representation
Converting HTML to React JSX-like syntax
- Host: GitHub
- URL: https://github.com/qrac/jsxlike
- Owner: qrac
- License: mit
- Created: 2023-02-07T04:29:12.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-04-03T11:46:14.000Z (over 1 year ago)
- Last Synced: 2024-11-20T11:12:40.749Z (about 1 month ago)
- Topics: browser, html2jsx, htmltojsx, japanese, javascript, jsx, jsxlike, react, typescript
- Language: TypeScript
- Homepage: https://jsxlike.qranoko.jp
- Size: 85 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# jsxlike
## Web Tool
- https://jsxlike.qranoko.jp
## About
HTML 文字列を React の JSX で使える構文におおよそ変換します。
- 依存ライブラリゼロ
- 正規表現の文字列マッチングと replace 関数のみなので軽量で高速
- 厳密な構文処理ではないので未実装のパターンは処理されない
## How To Use
```sh
$ npm i jsxlike
```
```js
import jsxlike from "jsxlike"
const htmlStr = `
bbb
`
console.log(jsxlike(htmlStr, {} /* options */))
// =>
bbb
```
## Options
```ts
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"],
},
}
```
### extractTags
type: `string[]`
特定の HTML タグを抽出できます。例えば `["link", "script"]` とすることで `` `` タグのみを出力できます。
### mapAttrs
type: `{ [attr: string]: string }`
属性名 `attr` を `value` に置換する設定。オプションを設定するとデフォルトオプションとマージされます。
### styleAttrs
type: `boolean`
スタイル属性を置換するか否か。
### styleTags
type: `boolean | "erase"`
スタイルタグを置換するか否か。または `erase` にすることで除去します。
### scriptTags
type: `boolean | "erase"`
スクリプトタグを置換するか否か。または `erase` にすることで除去します。
### commentTags
type: `boolean | "erase"`
コメントタグを置換するか否か。または `erase` にすることで除去します。
### voidTags
type: `string[]`
設定した空要素に閉じスラッシュを追加します。
### shortTags
type: `string[]`
設定した要素に子要素がない場合は閉じタグを省略します。配列に `*` を含むとすべての要素が対象となります。
### absolutePath
type: `string`
URL を設定するとルートパスが絶対パスに置換されます。
### absoluteAttrs
type: `{ [tagName: string]: string[] }`
絶対パスに置換するタグと属性を指定します。
## Security
jsxlike にエスケープ処理は含まれていません。ユーザーの入力を含んだ実行結果をそのままブラウザでレンダリングすると XSS の脆弱性に繋がる可能性があります。そういった場合はレンダリング前にサニタイジングを追加してください。
## License
- MIT
## Credit
- Author: [Qrac](https://qrac.jp)
- Organization: [QRANOKO](https://qranoko.jp)