To split a string containing html elements recursively and get particular values in javascript

Question

I am receiving a string which contains html element as response from which I am striping out particular values , I am able to apply it if the string contains single occurrence of that value , how can I do it for multiple occurrences

The html string which I would be receiving And using split I am able to get the value for a single occurrence below is the code

String containing html

"<div xmlns="http://www.w3.org/1999/xhtml" _ngcontent-c5="" 
  appdropzone="" appmovablearea="" class="dropzone" id="toget" ng-reflect- 
  ng-style="[object Object]" style="width: 100%; background-image: 
  url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALoAAAC6CAMAA
  teXl6RkZGnp6dtbW2FhYkJggg==&quot;);
  background-repeat: no-repeat; background-position: center center; 
  background-size: 100% 100%; border: 1px solid black; height: 340px;">
  <!--bindings={
  "ng-reflect-ng-for-of": ""
   }-->

      <div _ngcontent-c5="" appdroppable="" appmovable=""
        class="box draggable movable ng-star-inserted" touch-action="none"
        style="transform: translateX(183.2%) translateY(56%);"> abc 
        <span _ngcontent-c5="">X</span>
      </div>

      <div _ngcontent-c5="" appdroppable="" appmovable=""
        class="box draggable movable ng-star-inserted" touch-action="none"
        style="transform: translateX(183.2%) translateY(56%);"> def 
        <span _ngcontent-c5="">X</span>
      </div>

      <div _ngcontent-c5="" appdroppable="" appmovable=""
        class="box draggable movable ng-star-inserted" touch-action="none"
        style="transform: translateX(183.2%) translateY(56%);"> ghi 
        <span _ngcontent-c5="">X</span>
      </div>

      <div _ngcontent-c5="" appdroppable="" appmovable=""
        class="box draggable movable ng-star-inserted" touch-action="none"
        style="transform: translateX(183.2%) translateY(56%);"> jkl 
        <span _ngcontent-c5="">X</span>
      </div>


   </div>"

The code for splitting and getting the value for single occurence

   this.droppeditem = data.split('touch-action="none" style=')[1]
  .split('<span')[0];

    console.log(this.droppeditem);

The value what I get

   ""transform: translateX(183.2%) translateY(56%);"> abc "

How can I get this transform and (abc or def or ghi or jkl) value out of each of the divs

Use a regex - or maybe [not](https://stackoverflow.com/q/1732348/10221765). — Jack Bashford, Aug 10 '19 at 10:52
Parse the string into actual DOM nodes and use the regular methods (`.querySelectorAll()`, `.getElementsByTagName()`, ...) instead — Andreas, Aug 10 '19 at 10:59
@Andreas This I am receiving it in the response, I have mentioned it, and I need the transform values, how can I do this , please suggest — Enthu, Aug 10 '19 at 11:00

Andreas · Accepted Answer · 2019-08-10T13:06:09.223

1

Instead of splitting the string in parts or messing with regular expressions you could/should parse the string into actual HTMLElements, and then use .querySelectorAll() / .getElementsByTagName() / ... to get the elements and their transform values.

An working example (with a slightly stripped down version of your original input just to make it a little bit smaller)

const input = `<div xmlns="http://www.w3.org/1999/xhtml">
  <!--bindings={
  "ng-reflect-ng-for-of": ""
   }-->

      <div _ngcontent-c5="" appdroppable="" appmovable=""
        class="box draggable movable ng-star-inserted" touch-action="none"
        style="transform: translateX(183.2%) translateY(56%);"> abc 
        <span _ngcontent-c5="">X</span>
      </div>

      <div _ngcontent-c5="" appdroppable="" appmovable=""
        class="box draggable movable ng-star-inserted" touch-action="none"
        style="transform: translateX(183.2%) translateY(56%);"> def 
        <span _ngcontent-c5="">X</span>
      </div>
   </div>`

const container = document.createElement("div");
container.innerHTML = input;

container.querySelectorAll("div.box")
         .forEach(d => {
            console.log(d.style.transform);
            console.log(d.childNodes[0].textContent);
         });

edited Aug 10 '19 at 13:06

answered Aug 10 '19 at 11:07

Andreas

21,535
7
47
56

Thanks for the answer and insight, just for sake of knowledge could you please explain why we should go with this approach instead of split(I mean is it performance related or any other bottlenecks), I definitely see that is clear ,concise and to the point compared to split , i'll definitely try it out and accept. – Enthu Aug 10 '19 at 11:28
1

The same reasons as mentioned in the [RegEx match open tags except XHTML self-contained tags](https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags) post. Only if you're absolutely sure about the possible input format and if you can be sure that it won't ever change unexpectedly I maybe would use `.split()` or `.substring()` ... for this task. But parsing it and then use some specialized methods seems to be the all-time winner in this scenario for me. – Andreas Aug 10 '19 at 11:39
Make the selector more specific. `div.box` should work -> `container.querySelectorAll("div.box")`. I've edited my answer to also use `div.box`. – Andreas Aug 10 '19 at 13:05
Then there's a `div.box` element without a `style` attribute. You will have to test for it. – Andreas Aug 10 '19 at 13:47

To split a string containing html elements recursively and get particular values in javascript

1 Answers1