は、文字列から複数のサブストリングを選択するJavaScript

Question

問題：

が、私は（それのHTML形式）大きな文字列を持っていると私はそれから複数のサブストリングを選択し、[オブジェクトの配列にそれらをプッシュする必要があります。ご注意ください：私は元の文字列を変更することはできません。以下の例は簡略版です。

私は必要なもの

：

"レシピ" に関する情報を含むオブジェクトの配列、そのよう：

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" 
}] 

文字列がどのようなものか：

これはAです文字列の簡略化されたバージョン。元のものにはhrefなどのより多くの文字とより多くのタグが含まれています。したがって、これらの部分文字列だけをフィルタリングすることはできません。ご覧のとおり、画像へのタイトル、リンク、リンクは複数回表示されています。したがって、それらが '親'レシピに属している限り、どの複製がアレイにプッシュされても問題ありません。

<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> 

私のJavaScriptの知識がこれを解決するのに十分かどうかはわかりません。助けが大いにありがとう！

Answer 1

まず、区切り文字 "セクション"を使用して文字列分割を行います。 これはあなたのHTML文字列のすべてのセクションの配列を提供します。

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

次に、新しい配列の各値をforeachループで処理します。例えば。あなたはクレイジーだ場合

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, ...}; 
}) 

また、あなたはあなたのsectionArrayは現在のオブジェクトの値が入ります。この

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, ...}; 
}); 

のような既存のsectionArrayへのマッピングを行うことができます。

幸運を祈る！

Answer 2

HTMLを保持している変数がstrだった場合は、作成してdummy divに追加します。そこからセクションをマッピングし、それに応じて、キー/値のペアを割り当てます。

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

私は、文字列を取得し、ダミーのdivの内側にこのような何かにそれを置きます：

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

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

を

セクションタグを探し、属性を解析してタグを探し、必要な情報を解析します。

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++; 
} 

あなたがaswell必要なその他のデータを抽出することができます。このように、この情報を使用すると、オブジェクトを塗りつぶすし、その後配列に押し込みます。この例では、最初のタグに必要な情報があり、最初のイメージに必要な画像があり、タグが1つ以上、imgタグが1つ以上あることが前提です。