[{"data":1,"prerenderedAt":327},["ShallowReactive",2],{"node-red-\u002Fnode-red\u002Fcore-nodes\u002Fhtml":3},{"id":4,"title":5,"body":6,"description":17,"extension":320,"meta":321,"navigation":322,"path":323,"seo":324,"stem":325,"__hash__":326},"nodeRed\u002Fnode-red\u002Fcore-nodes\u002Fhtml.md","Node-RED - HTML Node",{"type":7,"value":8,"toc":299},"minimark",[9,14,18,23,32,36,61,68,72,75,80,86,90,100,104,107,124,128,134,140,143,200,204,208,214,219,223],[10,11,13],"h1",{"id":12},"html","HTML",[15,16,17],"p",{},"Extracts elements from an HTML document.",[19,20,22],"h2",{"id":21},"where-and-why-do-we-use-the-html-node","Where and why do we use the HTML node?",[15,24,25,26,31],{},"The HTML node parses HTML documents and extracts specific elements using CSS selectors. This is essential when you need to scrape data from web pages, extract specific content from HTML responses, or process HTML documents to retrieve structured information. Unlike the ",[27,28,30],"a",{"href":29},"\u002Fnode-red\u002Fcore-nodes\u002Ftemplate\u002F","template node"," which generates HTML, this node is purely for parsing and extraction.",[19,33,35],{"id":34},"how-it-works","How it works",[15,37,38,39,43,44,46,47,46,50,53,54,60],{},"The HTML node uses CSS selectors to find and extract elements from HTML content in ",[40,41,42],"code",{},"msg.payload",". You specify which elements to extract using standard CSS selector syntax (like ",[40,45,10],{},", ",[40,48,49],{},".classname",[40,51,52],{},"#id",", or more complex selectors). The node supports a combination of CSS and jQuery selectors - see the ",[27,55,59],{"href":56,"rel":57},"https:\u002F\u002Fgithub.com\u002Ffb55\u002Fcss-select",[58],"nofollow","css-select documentation"," for the full syntax.",[15,62,63,64,67],{},"The selector can be configured in the node's edit panel or provided dynamically via ",[40,65,66],{},"msg.select",".",[19,69,71],{"id":70},"modes-of-operation","Modes of operation",[15,73,74],{},"The HTML node can output extracted content in different ways:",[76,77,79],"h3",{"id":78},"single-message-with-array","Single Message with Array",[15,81,82,83,85],{},"Returns one message where ",[40,84,42],{}," contains an array of all matched elements. Use this when you want to process all results together or need to know the total count of matches.",[76,87,89],{"id":88},"multiple-messages","Multiple Messages",[15,91,92,93,95,96,99],{},"Sends separate messages for each matched element. Each message contains one matched element in ",[40,94,42],{}," and includes a ",[40,97,98],{},"msg.parts"," property for sequence tracking. Use this when you want to process each match individually through subsequent nodes.",[76,101,103],{"id":102},"return-format","Return Format",[15,105,106],{},"For each matched element, you can choose to return:",[108,109,110,118],"ul",{},[111,112,113,117],"li",{},[114,115,116],"strong",{},"HTML markup"," - the complete HTML including tags and attributes",[111,119,120,123],{},[114,121,122],{},"Text content"," - just the text with all HTML tags stripped",[19,125,127],{"id":126},"how-the-node-handles-messages","How the node handles messages",[15,129,130,131,133],{},"The HTML node processes the HTML string in ",[40,132,42],{},". After parsing and extracting the specified elements, it outputs the results according to the configured mode.",[15,135,136,137,139],{},"When outputting multiple messages, the node automatically adds the ",[40,138,98],{}," property to enable proper handling by downstream nodes like Join. This property includes the sequence identifier, message index, and total count.",[15,141,142],{},"The node uses CSS selector syntax with jQuery extensions, so you can use:",[108,144,145,156,161,167,176,185],{},[111,146,147,148,46,150,46,153],{},"Tag selectors: ",[40,149,10],{},[40,151,152],{},"div",[40,154,155],{},"span",[111,157,158,159],{},"Class selectors: ",[40,160,49],{},[111,162,163,164],{},"ID selectors: ",[40,165,166],{},"#elementid",[111,168,169,170,46,173],{},"Attribute selectors: ",[40,171,172],{},"[href]",[40,174,175],{},"[data-value=\"123\"]",[111,177,178,179,46,182],{},"Complex selectors: ",[40,180,181],{},"div.content > p",[40,183,184],{},"ul li:first-child",[111,186,187,188,46,191,46,194,46,197],{},"jQuery extensions: ",[40,189,190],{},":first",[40,192,193],{},":last",[40,195,196],{},":even",[40,198,199],{},":odd",[19,201,203],{"id":202},"examples","Examples",[76,205,207],{"id":206},"extracting-page-titles","Extracting page titles",[15,209,210,211,213],{},"This example fetches the Node-RED homepage and extracts the text from the ",[40,212,10],{}," tag. The HTTP Request node retrieves the page, and the HTML node parses it to find the heading.",[215,216],"render-flow",{":height":217,"flow":218},"200","W3siaWQiOiJmZTNmZmE5MThiYTQ1ZjI3IiwidHlwZSI6Imh0bWwiLCJ6IjoiOTlhMGI0NTExMGQ1NTNlYyIsIm5hbWUiOiJTZWxlY3QgSDEgZWxlbWVudCIsInByb3BlcnR5IjoicGF5bG9hZCIsIm91dHByb3BlcnR5IjoicGF5bG9hZCIsInRhZyI6ImgxIiwicmV0IjoiaHRtbCIsImFzIjoic2luZ2xlIiwieCI6NjEwLCJ5Ijo0MCwid2lyZXMiOltbIjA3ZGQxZWZmZjA0ZDIzMWEiXV19LHsiaWQiOiIzMzkzNTliNmE2NzkzYjNkIiwidHlwZSI6Imh0dHAgcmVxdWVzdCIsInoiOiI5OWEwYjQ1MTEwZDU1M2VjIiwibmFtZSI6IkdldCBOb2RlLVJFRC5vcmcgaG9tZXBhZ2UiLCJtZXRob2QiOiJHRVQiLCJyZXQiOiJ0eHQiLCJwYXl0b3FzIjoiaWdub3JlIiwidXJsIjoiaHR0cHM6Ly9ub2RlcmVkLm9yZy8iLCJ0bHMiOiIiLCJwZXJzaXN0IjpmYWxzZSwicHJveHkiOiIiLCJpbnNlY3VyZUhUVFBQYXJzZXIiOmZhbHNlLCJhdXRoVHlwZSI6IiIsInNlbmRlcnIiOnRydWUsImhlYWRlcnMiOltdLCJ4IjozNTAsInkiOjQwLCJ3aXJlcyI6W1siZmUzZmZhOTE4YmE0NWYyNyJdXX0seyJpZCI6ImU3ZGNkY2ZmNDljMTRhYjEiLCJ0eXBlIjoiaW5qZWN0IiwieiI6Ijk5YTBiNDUxMTBkNTUzZWMiLCJuYW1lIjoiIiwicHJvcHMiOlt7InAiOiJwYXlsb2FkIn0seyJwIjoidG9waWMiLCJ2dCI6InN0ciJ9XSwicmVwZWF0IjoiIiwiY3JvbnRhYiI6IiIsIm9uY2UiOmZhbHNlLCJvbmNlRGVsYXkiOjAuMSwidG9waWMiOiIiLCJwYXlsb2FkIjoiIiwicGF5bG9hZFR5cGUiOiJkYXRlIiwieCI6MTIwLCJ5Ijo0MCwid2lyZXMiOltbIjMzOTM1OWI2YTY3OTNiM2QiXV19LHsiaWQiOiIwN2RkMWVmZmYwNGQyMzFhIiwidHlwZSI6ImRlYnVnIiwieiI6Ijk5YTBiNDUxMTBkNTUzZWMiLCJuYW1lIjoiUHJpbnQgSDEgY29udGVudCIsImFjdGl2ZSI6dHJ1ZSwidG9zaWRlYmFyIjp0cnVlLCJjb25zb2xlIjpmYWxzZSwidG9zdGF0dXMiOmZhbHNlLCJjb21wbGV0ZSI6InBheWxvYWQiLCJ0YXJnZXRUeXBlIjoibXNnIiwic3RhdHVzVmFsIjoiIiwic3RhdHVzVHlwZSI6ImF1dG8iLCJ4Ijo4MjAsInkiOjQwLCJ3aXJlcyI6W119XQ==",[19,220,222],{"id":221},"node-documentation","Node Documentation",[152,224,227,233,234,233,238,233,267,233,271,233,287,233,291],{"className":225},[226],"core-node-doc",[15,228,229,230,232],{},"Extracts elements from an html document held in ",[40,231,42],{}," using a CSS selector."," ",[76,235,237],{"id":236},"inputs","Inputs",[239,240,243,252,256,264],"dl",{"className":241},[242],"message-properties",[244,245,246,247],"dt",{},"payload ",[155,248,251],{"className":249},[250],"property-type","string",[253,254,255],"dd",{},"the html string from which to extract elements.",[244,257,260,261],{"className":258},[259],"optional","select ",[155,262,251],{"className":263},[250],[253,265,266],{},"if not configured in the edit panel the selector can be set as a property of msg.",[76,268,270],{"id":269},"output","Output",[239,272,274,280],{"className":273},[242],[244,275,246,276],{},[155,277,279],{"className":278},[250],"array | string",[253,281,282,283,286],{},"the result can be either a single message with a payload containing an array of the matched elements, or multiple\nmessages that each contain a matched element. If multiple messages are sent they will also have ",[40,284,285],{},"parts"," set.",[76,288,290],{"id":289},"details","Details",[15,292,293,294,298],{},"This node supports a combination of CSS and jQuery selectors. See the\n",[27,295,59],{"href":296,"target":297},"https:\u002F\u002Fgithub.com\u002Ffb55\u002FCSSselect#user-content-supported-selectors","_blank"," for more information\non the supported syntax.",{"title":300,"searchDepth":301,"depth":301,"links":302},"",2,[303,304,305,311,312,315],{"id":21,"depth":301,"text":22},{"id":34,"depth":301,"text":35},{"id":70,"depth":301,"text":71,"children":306},[307,309,310],{"id":78,"depth":308,"text":79},3,{"id":88,"depth":308,"text":89},{"id":102,"depth":308,"text":103},{"id":126,"depth":301,"text":127},{"id":202,"depth":301,"text":203,"children":313},[314],{"id":206,"depth":308,"text":207},{"id":221,"depth":301,"text":222,"children":316},[317,318,319],{"id":236,"depth":308,"text":237},{"id":269,"depth":308,"text":270},{"id":289,"depth":308,"text":290},"md",{},true,"\u002Fnode-red\u002Fcore-nodes\u002Fhtml",{"title":5,"description":17},"node-red\u002Fcore-nodes\u002Fhtml","yzApipGy1hPSTaoVtLrrIs9IDo1WCQ_FostPCNrdQhY",1780070555921]