VueJS DOM parsing fix. Use regex to extract script instead of DOM operations. (#188)

Author: briedis

src/Extractors/VueJs.php

@@ -43,14 +43,16 @@ public static function fromString($string, Translations $translations, array $op
         // VueJS files are valid HTML files, we will operate with the DOM here
         $dom = self::convertHtmlToDom($string);
 
+        $script = self::extractScriptTag($string);
+
         // Parse the script part as a regular JS code
-        $script = $dom->getElementsByTagName('script')->item(0);
         if ($script) {
+            $scriptLineNumber = $dom->getElementsByTagName('script')->item(0)->getLineNo();
             self::getScriptTranslationsFromString(
-                $script->textContent,
+                $script,
                 $translations,
                 $options,
-                $script->getLineNo() - 1
+                $scriptLineNumber - 1
             );
         }
 
@@ -67,6 +69,22 @@ public static function fromString($string, Translations $translations, array $op
         }
     }
 
+    /**
+     * Extracts script tag contents using regex instead of DOM operations.
+     * If we parse using DOM, some contents may change, for example, tags within strings will be stripped
+     *
+     * @param $string
+     * @return bool|string
+     */
+    private static function extractScriptTag($string)
+    {
+        if (preg_match('#<\s*?script\b[^>]*>(.*?)</script\b[^>]*>#s', $string, $matches)) {
+            return $matches[1];
+        }
+
+        return '';
+    }
+
     /**
      * @param string $html
      * @return DOMDocument

tests/assets/vuejs/Csv.csv

@@ -13,7 +13,7 @@ Report-Msgid-Bugs-To:
 ,js-single,
 ,js-obj-single,
 some-context,js-action,
-,js-return,
+,<span>js-return</span><br>,
 ,t-cond-attribute,
 ,t-attribute,
 ,t-same-line-s,

tests/assets/vuejs/CsvDictionary.csv

@@ -4,7 +4,7 @@ js-alert,
 js-single,
 js-obj-single,
 js-action,
-js-return,
+<span>js-return</span><br>,
 t-cond-attribute,
 t-attribute,
 t-same-line-s,

tests/assets/vuejs/Jed.json

@@ -23,7 +23,7 @@
         "some-context\\u0004js-action": [
             ""
         ],
-        "js-return": [
+        "<span>js-return<\/span><br>": [
             ""
         ],
         "t-cond-attribute": [

tests/assets/vuejs/Json.json

@@ -21,7 +21,7 @@
             "js-obj-single": [
                 ""
             ],
-            "js-return": [
+            "<span>js-return<\/span><br>": [
                 ""
             ],
             "t-cond-attribute": [

tests/assets/vuejs/JsonDictionary.json

@@ -5,7 +5,7 @@
     "js-single": "",
     "js-obj-single": "",
     "js-action": "",
-    "js-return": "",
+    "<span>js-return<\/span><br>": "",
     "t-cond-attribute": "",
     "t-attribute": "",
     "t-same-line-s": "",

tests/assets/vuejs/PhpArray.php

@@ -37,7 +37,7 @@
       array (
         0 => '',
       ),
-      'js-return' => 
+      '<span>js-return</span><br>' => 
       array (
         0 => '',
       ),

tests/assets/vuejs/Po.po

@@ -37,7 +37,7 @@ msgid "js-action"
 msgstr ""
 
 #: ./tests/assets/vuejs/input.vue:56
-msgid "js-return"
+msgid "<span>js-return</span><br>"
 msgstr ""
 
 #: ./tests/assets/vuejs/input.vue:4

tests/assets/vuejs/Xliff.xlf

@@ -71,13 +71,13 @@
         <target></target>
       </segment>
     </unit>
-    <unit id="526e26ae7627d2587e7217f4cad5ff2a">
+    <unit id="165738b03fc41d793cf080ad7f3bf5e3">
       <notes>
         <note category="context"></note>
         <note category="reference">./tests/assets/vuejs/input.vue:56</note>
       </notes>
       <segment>
-        <source>js-return</source>
+        <source><![CDATA[<span>js-return</span><br>]]></source>
         <target></target>
       </segment>
     </unit>

tests/assets/vuejs/Yaml.yml

@@ -9,7 +9,7 @@ messages:
     js-alert: ''
     js-single: ''
     js-obj-single: ''
-    js-return: ''
+    '<span>js-return</span><br>': ''
     t-cond-attribute: ''
     t-attribute: ''
     t-same-line-s: ''