rphtml

A html parser written in rust, build wasm code for npm package.

一个用 rust 编写的 html 解析器，通过 wasm-pack/wasm-bindgen 提供 npm 包。

Use in node

# npm
npm install rphtml --save

# yarn
yarn add rphtml

import rphtml from "rphtml";
const htmlCode = `
<div class="header">
  <!--header-->
  <h3>this is header.</h3 >
</div>
`;
const ast = rphtml.parse(htmlCode, {
  allow_self_closing: true,
  allow_fix_unclose: false,
  case_sensitive_tagname: false,
});

const jsonData = ast.toJson();
console.log(jsonData);
/*
// will output like this
{ tag_index: 0,
  depth: 0,
  node_type: 'AbstractRoot',
  begin_at: { line_no: 1, col_no: 0, index: 0 },
  end_at: { line_no: 6, col_no: 0, index: 72 },
  childs:
   [ { tag_index: 0,
       depth: 1,
       node_type: 'SpacesBetweenTag',
       begin_at: [Object],
       end_at: [Object],
       content: [Array] },
     { tag_index: 1,
       depth: 2,
       node_type: 'Tag',
       begin_at: [Object],
       end_at: [Object],
       end_tag: [Object],
       childs: [Array],
       meta: [Object] },
     { tag_index: 0,
       depth: 1,
       node_type: 'SpacesBetweenTag',
       begin_at: [Object],
       end_at: [Object],
       content: [Array] } ] }
*/

const code = ast.render(nodeList, {
  always_close_void: false,
  lowercase_tagname: true,
  minify_spaces: true,
  remove_attr_quote: false,
  remove_comment: false,
  remove_endtag_space: true,
});
console.log(code);

/*
// output
<div class="header"><!--header--><h3>this is header.</h3></div>
*/

API

Methods

parse(content: string, parseOptions?: IJsParseOptions) : IJsNode

parse html code to AST, it's a pointer.

通过 parse 静态方法将 html 字符串解析成 html 解析树，它的返回值是一个指针对象，需要调用其上的方法才能获得实际可用的数据。

---

IJsParseOptions

// static 'parse' method argument options.
// parse方法提供以下配置参数
type IJsParserOptions = {
  allow_self_closing?: boolean;
  allow_fix_unclose?: boolean;
  case_sensitive_tagname?: boolean;
};

• allow_self_closing

  if allow not void element use self-closing, e.g.: <div />

  是否允许自闭合标签，不为 true 的情况下 <div /> 这种写法将视为错误。

• allow_fix_unclose

  if allow empty tags such as <div><button class="btn"></div>,not recommend

  是否允许自动修复没有闭合的标签，不推荐，因为这种修复很可能是错误的。

• case_sensitive_tagname

  if true, the tag's name will case-sensitive,that means <div> and </DIV> are not matched each other.

  tag 标签是否区分大小写，区分大小写的情况下，<div>和<DIV> 将视作不同的标签，将影响标签的配对。

---

IJsNode

Methods of IJsNode

render(renderOptions?: IJsRenderOptions) : string

render the ast to html code.

将 html 解析树渲染成 html 代码。

---

IJsRenderOptions

type IJsRenderOptions = {
  always_close_void?: boolean;
  lowercase_tagname?: boolean;
  minify_spaces?: boolean;
  remove_attr_quote?: boolean;
  remove_comment?: boolean;
  remove_endtag_space?: boolean;
  inner_html?: boolean;
  decode_entity?: boolean;
};

• always_close_void

  always use self-closing for void elements.<meta charset="utf8"> will output <meta charset="utf8" />

  为 true 时，将始终给 void elements 标签元素添加反斜杠自闭合标记。

• lowercase_tagname

  if true, will always translate the tag's name to lowercase

  为 true 时，将强制将所有标签名转为小写。

• minify_spaces

  if true, will remove all the spaces between tags and minify the text node's repeat spaces into one if not in pre tag.

  为 true 时，将去除标签之间的空格；标签内文本左右的空格将会压缩成一个；pre 标签的空格将保持不变。

• remove_attr_quote

  if true, will remove the attribute value's quote ' or ", if the value has special character such as spaces and < e.g, it will make no sense.

  为 true 时，将会根据属性值有条件的去掉引号。

• remove_comment

  if true, will remove all comments node.

  是否移除所有注释标签。

• remove_endtag_space

  if true, will remove the tag's end spaces, <div></div > will output <div></div>

  由于结束标签后面允许出现空格，设为 true 的情况下将会去除这些空格。

• inner_html

  if true,will output the tag's inner html.

  为 true 的情况下，将获取 innerHTML.

• decode_entity

  if true, will decode the entity text to an unicode character.

  是否 decode 文本中的实体为一个 unicode 字符。

---

toJson() : IJsNodeTree

return a json data from the pointer after call the parse method.

通过parse方法得到了指针对象后，调用toJson()方法可以获得一个 json 格式的解析树数据。

type IJsNodeTree = {
  uuid?: string; // the tag's uuid, only for element tag node.
  depth: number; // the node's depth of the nested.
  node_type: NodeType;
  begin_at: CodePosAt;
  end_at: CodePosAt;
  content?: Array<string>; // content character
  end_tag?: IJsNodeTree; // the closed tag
  meta?: IJsNodeTagMeta; // tag meta information.
  childs?: Array<IJsNodeTree>; // the childs of the tag.
};

---

toString() : string

return the string of the json data, like JSON.stringify(), you can use JSON.parse() in javascript to get the json data,is same as the toJSON().

和toJson方法类似，但该方法返回的是 json 字符串，需要进行 parse 后才能获得真实的 json 对象。

---

getTagByUuid(uuid:string) : IJsNode

return the tag node by uuid.

每个 tag 节点都会带有自己的 uuid 标记，通过调用根节点的该方法可以获得子节点的引用。与 dom 内的getElementById方法类似。

---

isAloneTag: boolean

check if the node is a tag node without child tags, e.g. <div>abc</div>

属性isAloneTag表示标签 tag 不包含有其它子 tag。

---

License

MIT License.