@nickcuper/node-red-contrib-html-pro

Node RED html parser

Installation

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

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:

<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": ""
    }
  ]
}