{"library":"react-native-dom-parser","title":"React Native DOM Parser","description":"react-native-dom-parser is a JavaScript DOM parser specifically designed for environments where standard browser DOM APIs or Node.js DOM implementations are not available, such as within React Native applications. It operates by parsing HTML strings using JavaScript regular expressions, making it lightweight and highly portable across various JavaScript ecosystems including React, React Native, and Vue. The current stable version is 1.5.3. Its primary differentiator is its complete independence from specific host environments, relying solely on regex for parsing. While this offers broad compatibility, it can introduce limitations compared to robust, spec-compliant parsers, particularly concerning edge cases in malformed HTML. The library provides a subset of standard DOM-like query methods including `getElementById`, `getElementsByClassName`, `getElementsByTagName`, and `getElementsByName`, returning a custom node structure (`ElementNode` and `TextNode`). Planned future enhancements include the addition of `querySelector` and `querySelectorAll` capabilities.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-native-dom-parser"],"cli":null},"imports":["import DomSelector from 'react-native-dom-parser';","const DomSelector = require('react-native-dom-parser');","const rootNode = DomSelector(htmlString); console.log(rootNode.children[0].tagName);"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import DomSelector from 'react-native-dom-parser';\n\nconst rowHtmlData = `\n  <div id=\"myCarousel\" class=\"carousel slide\" data-interval=\"false\">\n    <h1 style=\"color: blue;\">Welcome to My Page</h1>\n    <div class=\"item active\">\n      <p>This is item 1.</p>\n      <input type=\"text\" name=\"dataItem1\" value=\"hello\" />\n    </div>\n    <div class=\"item\">\n      <p>This is item 2.</p>\n      <input type=\"text\" name=\"dataItem2\" value=\"world\" />\n    </div>\n    <span class=\"footer\">A simple footer.</span>\n  </div>\n`;\n\n// Parse the HTML string into a DOM-like structure\nconst rootNode = DomSelector(rowHtmlData);\n\n// Query methods\nconsole.log('Root Node Tag:', rootNode.tagName); // Should be 'div'\nconst carouselElement = rootNode.getElementById('myCarousel');\nconsole.log('Carousel ID:', carouselElement?.attributes.id);\n\nconst items = rootNode.getElementsByClassName('item');\nconsole.log('Number of items:', items.length);\nif (items.length > 0) {\n  console.log('First item classList:', items[0].classList);\n  const inputByName = items[0].getElementsByName('dataItem1');\n  console.log('Input value by name:', inputByName[0]?.attributes.value);\n}\n\nconst divs = rootNode.getElementsByTagName('div');\nconsole.log('Number of div elements:', divs.length);\n\n// Accessing children and properties\nconsole.log('Children of rootNode:', rootNode.children.map(c => c.tagName || 'text'));\nif (rootNode.children.length > 0 && rootNode.children[1].tagName === 'h1') {\n    const h1Node = rootNode.children[1];\n    console.log('H1 style:', h1Node.style);\n    console.log('H1 text:', h1Node.children[0]?.text); // Accessing text node directly\n}","lang":"javascript","description":"Demonstrates parsing an HTML string, accessing elements using ID, class, tag name, and name, and traversing the resulting node structure.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}