Auswählen mehrere Teilstrings aus String JavaScript

Question

Das Problem:

Ich habe eine große Zeichenfolge (es ist HTML-Format) und ich brauche mehr Teil aus, um es auszuwählen und sie dann in ein Array von Objekten zu schieben. Bitte beachten Sie: I kann die ursprüngliche Zeichenfolge nicht ändern. Das folgende Beispiel ist eine vereinfachte Version.

Was ich brauche:

Ein Array von Objekten, die Informationen über "Rezepte", etwa so:

const recipes = [ 
{ 
    title: "This is title number 1", 
    imagelink: "/exampleimage1.jpg", 
    recipelink: "www.examplelink1.com" 
}, { 
    title: "This is title number 2", 
    imagelink: "/exampleimage2.jpg", 
    recipelink: "www.examplelink2.com" 
}] 

Was die Zeichenfolge wie folgt aussieht:

Dies ist ein vereinfachte Version der Zeichenfolge. Das Original enthält mehr Zeichen und mehr Tags wie href usw. So kann ich nicht nur auf diese Teilstrings filtern. Wie Sie sehen können, sind der Titel, der Link und der Link zum Bild mehr als einmal vorhanden. Es spielt also keine Rolle, welche Duplikate in das Array geschoben werden, solange sie zu ihrem übergeordneten Rezept gehören.

<section class="item recipe " data-title="This is title number 1" data-record-type="recipe"> 
    <figure class=""> 
     <a href="www.examplelink1.com"> 
      <span class="favorites-wrapper"> 
       <span class="favorite shadow " data-is-favorite="false" data-recipe-id="11111" data-recipe-title="This is title number 1"> 
       </span> 
      </span> 
      <span class="type">recept</span> 
      <img src="images/blank-16x11.gif" data-src="/exampleimage1.jpg" class="js-lazyload" data-retina-src="/exampleimage1.jpg" alt="This is title number 1"> 
     </a> 
    </figure> 

    <header> 
     <h4> <a href="www.examplelink1.com"> This is title number 1 </a> </h4> 
     <div class="rating"> 
      <span><div class="icon icon-star active"></div></span> 
      <span><div class="icon icon-star active"></div></span> 
      <span class="count">(<span>84</span>)</span>  
     </div> 
     <div class="time">15 min.</div> 
    </header> 
</section> 

<section class="item recipe " data-title="This is title number 2" data-record-type="recipe"> 
    <figure class=""> 
     <a href="www.examplelink2.com"> 
      <span class="favorites-wrapper"> 
       <span class="favorite shadow " data-is-favorite="false" data-recipe-id="22222" data-recipe-title="This is title number 2"> 
       </span> 
      </span> 
      <span class="type">recept</span> 
      <img src="images/blank-16x11.gif" data-src="/exampleimage2.jpg" class="js-lazyload" data-retina-src="/exampleimage2.jpg" alt="This is title number 2"> 
     </a> 
    </figure> 

    <header> 
     <h4> <a href="www.examplelink2.com"> This is title number 2 </a> </h4> 
     <div class="rating"> 
      <span><div class="icon icon-star active"></div></span> 
      <span><div class="icon icon-star active"></div></span> 
      <span class="count">(<span>84</span>)</span>  
     </div> 
     <div class="time">15 min.</div> 
    </header> 
</section> 

Ich bin mir nicht sicher, ob mein JavaScript-Wissen weit genug reicht, um dies zu lösen. Hilfe wird sehr geschätzt!

Answer 1

Zuerst würden Sie eine Zeichenkettenaufteilung mit Trennzeichen "Abschnitt" zum Beispiel tun. Dies gibt Ihnen ein Array aller Abschnitte in Ihrer HTML-Zeichenfolge.

const sectionArray = sourceString.split("section"); 

Als nächstes in einer foreach-Schleife jeden Wert in Ihrem neuen Array behandeln. z.B.

let myObjectArray = []; 
let i = 0; 

sectionArray.forEach(section => { 
    let title = section.substring(section.indexOf('data-title=') + 12, section.length); 
    title = title.substring(0, title.indexOf('"')); 

    let imagelink = section.substring... 

    myObjectArray[i++] = {title, imagelink, ...}; 
}) 

Auch, wenn Sie verrückt sind, könnten Sie wie diese eine Zuordnung in die bestehende sectionArray tun

sectionArray.map(section => { 
    let title = section.substring(section.indexOf('data-title=') + 12, section.length); 
    title = title.substring(0, title.indexOf('"')); 

    let imagelink = section.substring... 

    return {title, imagelink, ...}; 
}); 

Ihr sectionArray wird nun mit Objektwerten gefüllt werden.

Viel Glück!

Answer 2

Wenn Sie eine str Variable hatten, die Ihren HTML-Code enthielt, würden Sie ihn erstellen und an dummy div anhängen. Von dort aus durch die Abschnitte Karte und die Schlüssel/Wert-Paare entsprechend zuweisen:

const str = `<section class="item recipe " data-title="This is title number 1" data-record-type="recipe"> 
 
    <figure class=""> 
 
     <a href="www.examplelink1.com"> 
 
      <span class="favorites-wrapper"> 
 
       <span class="favorite shadow " data-is-favorite="false" data-recipe-id="11111" data-recipe-title="This is title number 1"> 
 
       </span> 
 
      </span> 
 
      <span class="type">recept</span> 
 
      <img src="images/blank-16x11.gif" data-src="/exampleimage1.jpg" class="js-lazyload" data-retina-src="/exampleimage1.jpg" alt="This is title number 1"> 
 
     </a> 
 
    </figure> 
 

 
    <header> 
 
     <h4> <a href="www.examplelink1.com"> This is title number 1 </a> </h4> 
 
     <div class="rating"> 
 
      <span><div class="icon icon-star active"></div></span> 
 
      <span><div class="icon icon-star active"></div></span> 
 
      <span class="count">(<span>84</span>)</span>  
 
     </div> 
 
     <div class="time">15 min.</div> 
 
    </header> 
 
</section> 
 

 
<section class="item recipe " data-title="This is title number 2" data-record-type="recipe"> 
 
    <figure class=""> 
 
     <a href="www.examplelink2.com"> 
 
      <span class="favorites-wrapper"> 
 
       <span class="favorite shadow " data-is-favorite="false" data-recipe-id="22222" data-recipe-title="This is title number 2"> 
 
       </span> 
 
      </span> 
 
      <span class="type">recept</span> 
 
      <img src="images/blank-16x11.gif" data-src="/exampleimage2.jpg" class="js-lazyload" data-retina-src="/exampleimage2.jpg" alt="This is title number 2"> 
 
     </a> 
 
    </figure> 
 

 
    <header> 
 
     <h4> <a href="www.examplelink2.com"> This is title number 2 </a> </h4> 
 
     <div class="rating"> 
 
      <span><div class="icon icon-star active"></div></span> 
 
      <span><div class="icon icon-star active"></div></span> 
 
      <span class="count">(<span>84</span>)</span>  
 
     </div> 
 
     <div class="time">15 min.</div> 
 
    </header> 
 
</section>`; 
 

 
const dummyDiv = document.createElement('div'); 
 

 
dummyDiv.innerHTML += str; 
 

 
const obj = Array.from(dummyDiv.querySelectorAll('.recipe')).map(section => { 
 
    
 
    return { 
 
    title: section.dataset.title, 
 
    imagelink: section.querySelector('img').dataset.src, 
 
    recipelink: section.querySelector('a').href 
 
    }; 
 
}); 
 

 
console.log(obj);

Answer 3

ich die Zeichenfolge bekommen würde, und legen Sie sie in einem Dummy div etwas wie folgt aus:

HTML: 
<div id="dummyContent"></div> 

JS: 
document.getElementById('dummyContent').innerHTML = [string]; 

und suchen Sie dann nach den Abschnittstags, analysieren Sie die Attribute und suchen Sie nach den Tags a und analysieren Sie die benötigten Informationen. Mit dieser Info, füllen Sie ein Objekt, und drücken ihn dann in ein Array, wie folgt aus:

recipes = []; 
$els = document.getElementsByTagName('section'); 
var i = 0;while(i < $els.length){ 
    $el = $els[i]; 
    var data = {}; 
    data.title = $el.getAttribute('data-title'); 
    data.link = $el.getElementsByTagName('a')[0].getAttribute('href'); 
    data.img = $el.getElementsByTagName('img')[0].getAttribute('src'); 
    receipes.push(data); 
    i++; 
} 

Sie andere Daten extrahieren können Sie als gut brauchen.In diesem Beispiel wird außerdem davon ausgegangen, dass das erste Tag über die erforderlichen Informationen verfügt und dass das erste Bild über das Bild verfügt, das Sie benötigen, und dass mindestens 1 Tag und 1 IMG-Tag vorhanden sein müssen.