ウェブサイトの掻き取り| JSONファイルを作成するにはどうすればよいですか？

Question

私はちょうど掻き集めるウェブサイトを学び始めています。

私が掻いているウェブサイトには、メインの「コンテンツ」があります。コンテンツdivの中には記事があり、記事の見出しは<h2>タグの内側にあります。

私は次のコードを使ってヘッダーを参照する方法を考え出しました。今、すべてのヘッダーをJSONファイルに保存します。見出しごとにオブジェクトを作成する方法明らかに私のコードは、のタイトルobjのすべての繰り返しで、を置き換えます。あなたは、各<h2>要素について{title: "Some title"}に似たオブジェクトの配列をしたい場合は

var title, date, img_url, permalink; 
var obj = { title : "", date : "", img_url : "", permalink : ""}; 

     // ======== Extracting Title ================ 
     $('#Content').filter(function(){ 
      var data = $(this); 
      let headers = data.find('h2'); 

      headers.each(function (i, el) { 
       obj.title = $(el).text(); 
      }) 
     }) 

Answer 1

、あなたは簡単に使用することができます

const headerObjects = Array.from(document.querySelectorAll('#Content h2')).map(h2 => ({ 
 
    title: h2.textContent 
 
})) 
 

 
console.info(headerObjects)

<div id="Content"> 
 
<h2>Title 1</h2> 
 
<p>Here's some text</p> 
 
<h2>Title 2</h2> 
 
<p>Some more text</p> 
 
<h2>Last title</h2> 
 
<p>One more paragraph</p> 
 
</div>

参考：

• document.querySelectorAll
• Array.from
• Array.prototype.map
• Arrow functions

Answer 2

ボタン「ファイルを作成」​​をクリックしたときに、それがフォーマットさJSONファイルをダウンロードするには、ダウンロードlink.Thatリンクリードを作成します。このコード.IN、次のコードを試してみてくださいo/p。ここで

var json = []; 
 
$("h2").each(function(i) { 
 
    var title = $(this).html(); 
 
    item = {}; 
 
    item ["title"] = title; 
 
    json.push(item); 
 
}); 
 

 
(function() { 
 
    var textFile = null, 
 
     makeTextFile = function (text) { 
 
     var data = new Blob([text], {type: 'application/json'}); 
 
     if (textFile !== null) { 
 
      window.URL.revokeObjectURL(textFile); 
 
     } 
 
     textFile = window.URL.createObjectURL(data); 
 
     return textFile; 
 
     }; 
 
    create.addEventListener('click', function() { 
 
    var link = document.getElementById('downloadlink'); 
 
    link.href = makeTextFile(JSON.stringify(json, null, 4)); 
 
    link.style.display = 'block'; 
 
    }, false); 
 
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="Content"> 
 
    <h2>Title 1</h2> 
 
    <p>Here's some text</p> 
 
    <h2>Title 2</h2> 
 
    <p>Some more text</p> 
 
    <h2>Last title</h2> 
 
    <p>One more paragraph</p> 
 
</div> 
 
<button id="create">Create file</button> 
 
<a download="info.txt" id="downloadlink" style="display: none">Download</a>

作業jsfiddleです：https://jsfiddle.net/o1kvk63o/

私はそれはあなた

助けされるべきだと思います