title: Get x y w from a string?
body: <p>I have a string in javascript like :</p>
  
  <pre><code>"&lt;div class="croppie-result" style="width: 584px; height: 584px;"&gt;&lt;img src="screenshot.png" style="left: -391px; top: -92px;"&gt;&lt;/div&gt;"
  </code></pre>
  
  <p>I want to extract or get values of <code>left</code>, <code>top</code>, <code>width</code> from this string in variables <code>x</code>,<code>y</code>,<code>w</code>.</p>
  
  <pre><code>x=391
  y=92
  w=584
  </code></pre>
  
  <p>How do I do this?</p>
  
  <p><strong>Note :</strong> Values of x and y are positive intentionally, not by mistake. </p>
  
  <p>This is part of a task to crop the image or get a cropped image using <code>croppie</code>.</p>
  
  <p>Here is the complete code :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var el = document.getElementById('resizer-demo');
  var resize = new Croppie(el, {
    viewport: {
      width: 300,
      height: 300,
      type: 'square'
    },
    boundary: {
      width: 400,
      height: 400
    },
    showZoomer: true,
    enableResize: false,
    enableOrientation: true,
    mouseWheelZoom: 'ctrl'
  });
  resize.bind({
    url: '/home/shashanksingh/Pictures/Screenshot.png',
  });
  
  //on button click
  function myFunction() {
    document.getElementById('msg').innerHTML = 'You clicked!';
    resize.result('html').then(function(data) {
  
      document.getElementById('msg').innerHTML = data.outerHTML;
      debugger
      // do something with cropped blob
    });
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.min.css" rel="stylesheet" /&gt;
  
  &lt;center&gt;
    &lt;div id='resizer-demo'&gt;&lt;/div&gt;
    &lt;button type="button" id='crop_it' onclick='myFunction()'&gt;Crop&lt;/button&gt;
    &lt;div id='msg'&gt;You can also use CTRL + mouse-wheel to zoom.&lt;/div&gt;
    &lt;br&gt;&lt;br&gt;&lt;br&gt;
  &lt;/center&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Open to suggestions I have to make a server request. I was thinking of sending these coordinates as I wasn't able to do anything else.</p>