Merge pull request #18 from baconcheese113/master

Less strict matching for getElementsByClass
choru-k · Feb 4, 2020 · 98d32b7 · 98d32b7
2 parents 70ca8c5 + 4d70385
commit 98d32b7
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 22 deletions.
diff --git a/changelog b/changelog
diff --git a/dom.js b/dom.js
@@ -821,11 +821,11 @@ Element.prototype = {
 			return ls;
 		});
 	},
-	getElementsByClassName : function(className){
+	getElementsByClassName : function(className, exactMatch = true){
 		return new LiveNodeList(this,function(base){
 			var ls = [];
 			_visitNode(base,function(node){
-				if(node !== base && node.nodeType == ELEMENT_NODE && node.hasAttribute('class') && (node.getAttribute('class') == className)){
+				if(node !== base && node.nodeType == ELEMENT_NODE && node.hasAttribute('class') && (exactMatch ? node.getAttribute('class') === className : node.getAttribute('class').replace(/\s+/g, ' ').trim().split(" ").includes(className))){
 					ls.push(node);
 				}
 			});

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-html-parser",
-  "version": "0.0.5",
+  "version": "0.1.0",
   "description": "can use html/xml parser in react-native/titanium/browser anywhere",
   "keywords": [
     "dom",
@@ -71,7 +71,7 @@
     }
   ],
   "bugs": {
-    "url": "http://github.com/g6ling/xmldom/issues",
+    "url": "http://github.com/g6ling/react-native-html-parser/issues",
     "email": "g6lingpdev@gmail.com"
   },
   "licenses": [

diff --git a/readme.md b/readme.md
@@ -24,13 +24,13 @@ class TestReactNativeHtmlParser extends Component {
     componentDidMount() {
         let html = `<html>
                         <body>
-                            <div id="b">
+                            <div id="b a">
                                 <a href="example.org">
                                 <div class="inA">
                                     <br>bbbb</br>
                                 </div>
                             </div>
-                            <div class="bb">
+                            <div class="bb a">
                                 Test
                             </div>
                         </body>
@@ -39,7 +39,8 @@ class TestReactNativeHtmlParser extends Component {
 
         console.log(doc.querySelect('#b .inA'))
         console.log(doc.getElementsByTagName('a'))
-        console.log(doc.querySelect('#b a[href="example.org"]'))
+				console.log(doc.querySelect('#b a[href="example.org"]'))
+				console.log(doc.getElementsByClassName('a', false))
     }
 
 }

diff --git a/test/test.js b/test/test.js
@@ -1,19 +1,48 @@
-var DOMParser = require('react-native-html-parser').DOMParser;
+var DOMParser = require('../dom-parser').DOMParser;
+
 var doc = new DOMParser().parseFromString(
-    '<html><body>'+
-    '<div id="a" class="a">'+
-        '<a class="b">abcd</a>'+
-    '</div>'+
-    '<div class="b">'+
-        '<a href="aa" id="b">'+
-    '</div>'+
-    '</body></html>'
-    ,'text/html');
+  `<html><body>
+  <div id="a" class="a">
+      <a class="b">abcd</a>
+  </div>
+  
+  <div id="a" class="a">
+      <a class="b">efgh</a>
+  </div>
+  
+  <div class="b a andEvenMore" name="my-element">
+      <a href="aa" id="b" />
+  </div>
+  <div class="a b c d">
+    <div class="video video_link" href="www.myvideos.com/video1.mp4">
+      <p class="tiny  text duration">3:40</p>
+      <img data-src="www.myvideos.com\/video1.png" alt="video1 image" />
+    </div>
+  </div>
+  <div class="a b c d">
+    <div class="video video_link" href="www.myvideos.com/video2.mp4">
+      <p class="tiny  text duration">9:33</p>
+      <img data-src="www.myvideos.com\/video2.png" alt="video2 image" />
+    </div>
+  </div>
+  <div class="a b c d">
+    <div class="video video_link" href="www.myvideos.com/video3.mp4">
+      <p class="tiny  text duration">4:21</p>
+      <img data-src="www.myvideos.com\/video3.png" alt="video3 image" />
+    </div>
+  </div>
+  </body></html>`
+  ,'text/html');
+
+// console.log(doc.getElementsByAttribute('class', 'b'));
+var ulResults = Array.from(doc.getElementsByClassName('video_link', false))
+ulResults.forEach(el => console.log(el.getAttribute("href").replace(/\\/g, '')))
+ulResults.forEach(el => console.log(el.querySelect('img')[0].getAttribute("alt")))
+ulResults.forEach(el => console.log(el.getElementsByClassName('duration', false)[0].textContent))
+// console.log(ulResults[0].querySelect('img')[0].getAttribute("alt"))
 
-//console.log(doc.getElementsByAttribute('class', 'b'));
-//console.log(doc.querySelect('.div.aa       class#a a'))
+// console.log(doc.querySelect('.div.aa       class#a a'))
 //console.log(doc.findSelector('div.aa#in[ii="a"]'))
 //console.log(doc.getElementsBySelector('a[href="aa"]#b'))
 //console.log(doc.getElementsBySelector('div.b'))
-console.log(doc.querySelect('div.a a.b'))
 console.log('end')