npm package: @nickcuper/node-red-contrib-html-pro
Description: Advance html parser for NodeRED
Author: Dmytro Petrenko
Latest version: 1.0.5

# Node RED html parser

### Installation

```sh
npm i @nickcuper/node-red-contrib-html-pro
```

```sh
yarn add @nickcuper/node-red-contrib-html-pro
```
### FAQ

**Common config:**

| Prop         | Type      | Required | Default   | Description                       |
|--------------|-----------|----------|-----------|-----------------------------------|
| Property     | `string`  | No       | `payload` | Input data eg: `<p>paragraph</p>` |
| Out Property | `string`  | No       | `payload` | Output data after parsing html    |

**Parser config:**

| Prop         | Type                                | Required | Description                                                                                       |
|--------------|-------------------------------------|----------|---------------------------------------------------------------------------------------------------|
| Return Array | `boolean`                           | Yes      | If not selected will return first element                                                         |
| Key          | `string`                            | Yes      | Parsed value will be assign on it                                                                 |
| CSS path     | `string`                            | Yes      | Define css path [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors]                  |
| Return as    | `Text`, `Html`,`Value`, `Attribute` | Yes      | Return data type                                                                                  |
| Attribute    | `string`                            | No       | Returns attribute value if defined [https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes] |

### Examples:

- Extract text from div

| Prop         | Value    |
|--------------|----------|
| Return Array | `false`  | 
| Key          | `result` | 
| CSS path     | `.item`  | 
| Return as    | `Text`   |                        
| Attribute    | `none`   |

**input**:
```html 
<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>
```
**output**: 
```json
  { "result": "Item 1" }
```

- Extract text as array

| Prop         | Value    |
|--------------|----------|
| Return Array | `true`   | 
| Key          | `result` | 
| CSS path     | `.item`  | 
| Return as    | `Text`   |                        
| Attribute    | `none`   | 

**input**:

```html 
<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>
```

**output**:
```json
  { "result": ["Item 1", "Item 2", "Item 3"] }
```

- Extract data as html

| Prop         | Value    |
|--------------|----------|
| Return Array | `false`  | 
| Key          | `result` | 
| CSS path     | `.item`  | 
| Return as    | `Html`   |                        
| Attribute    | `none`   |

**input**:
```html 
<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>
```
**output**:
```json
  { "result": "<div class="item">item 1</div>" }
```

- Extract value (will work with input|select|textarea)

| Props Name   | Value    |
|--------------|----------|
| Return Array | `true`   | 
| Key          | `result` | 
| CSS path     | `.item`  | 
| Return as    | `Value`  |                        
| Attribute    | `none`   |

**input**:
```html 
<div class="container">
    <input class="item" value="input value"/>
    <textarea class="item">textarea value</textarea>
    <select class="item" name="pets">
        <option value="Dog" selected>Dog</option>
        <option value="Cat">Cat</option>
    </select>
    <select class="item" name="animals" multiple>
        <option value="Dog">Dog</option>
        <option value="Cat" selected>Cat</option>
        <option value="Racoon" selected>Racoon</option>
    </select>
</div>
```
**output**:
```json
  { "result": ["input value", "textarea value", "Dog", ["Cat", "Racoon"]] }
```

- Extract element`s attribute value

| Props Name   | Value       |
|--------------|-------------|
| Return Array | `true`      | 
| Key          | `result`    | 
| CSS path     | `.item`     | 
| Return as    | `Attribute` |                        
| Attribute    | `src`       |

**input**:
```html 
<div class="container">
    <img class="item" src="001.png" alt=""/>
    <img class="item" src="002.png" alt=""/>
    <img class="item" src="003.png" alt=""/>
</div>
```
**output**:
```json
  { "result": ["001.png", "002.png", "003.png"] }
```

- Extract element's attributes value (if `Attribute` is not define it will return all props of `.item` element)

| Props Name   | Value       |
|--------------|-------------|
| Return Array | `true`      | 
| Key          | `result`    | 
| CSS path     | `.item`     | 
| Return as    | `Attribute` |                        
| Attribute    | `none`      |

**input**:
```html 
<div class="container">
    <img class="item" src="001.png" alt=""/>
    <img class="item" src="002.png" alt=""/>
    <img class="item" src="003.png" alt=""/>
</div>
```
**output**:

```json
  {
  "result": [
    {
      "class": "item",
      "src": "001.png",
      "alt": ""
    },
    {
      "class": "item",
      "src": "002.png",
      "alt": ""
    },
    {
      "class": "item",
      "src": "003.png",
      "alt": ""
    }
  ]
}
```

![alt text](img.png)