npm i @nickcuper/node-red-contrib-html-pro
yarn add @nickcuper/node-red-contrib-html-pro
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] |
- Extract text from div
Prop | Value |
---|---|
Return Array | false |
Key | result |
CSS path | .item |
Return as | Text |
Attribute | none |
input:
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
output:
{ "result": "Item 1" }
- Extract text as array
Prop | Value |
---|---|
Return Array | true |
Key | result |
CSS path | .item |
Return as | Text |
Attribute | none |
input:
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
output:
{ "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:
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
output:
{ "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:
<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:
{ "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:
<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:
{ "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:
<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:
{
"result": [
{
"class": "item",
"src": "001.png",
"alt": ""
},
{
"class": "item",
"src": "002.png",
"alt": ""
},
{
"class": "item",
"src": "003.png",
"alt": ""
}
]
}