Question

我有一个包含许多div元素的HTML文件，例如

<div data-store="&#123;&quot;timestamp&quot;:8479216890119,&quot;author&quot;:8819156222,&quot;uuid&quot;:&quot;mid.8473116890448:a31179k549&quot;&#125;" data-sigil="message-text">
    <span>A message</span>
</div>

我想将其转换为内容为

的CSV文件

timestamp,author,text
8479216890119,8819156222,A message
...

因此HTML文件包含许多不同的div元素，但我只对那些属性为data-store的div元素感兴趣。从这个div元素中，我想从timestamp属性中提取author和data-store，从div元素中提取span元素中的文本。

我知道我可以用一些正则表达式做到这一点，但我想知道是否可以更容易做一些像

let csv = 'timestamp,author,text\n';
document.querySelector('div').forEach((el) => {
  const data = el.getAttribute('data-store');
  if (data) {
    const timestamp = ?; // extract from data
    const author = ?; // extract from data
    const text = el.childElement('span').innerHTML();
    csv += timestamp + ',' + author + ',' + text + '\n';
  }
});

document.write(csv);

我知道这段代码不起作用，但我想可能会做这样的事情吗？

Answer 1

以下是使用属性＆＃39;数据存储＆＃39;保存div的示例示例。信息为csv：

＆＃13;

var csv = 'timestamp,author,text\n<br>';
$('.main div[data-store]').each(function(index,el){
  var req_data = $.parseJSON($(this).attr('data-store'));
  var timestamp = req_data.timestamp;
  var author = req_data.author;
  var msg = $.trim($(this).find('span').text());
  csv+=timestamp+","+author+","+msg+"\n<br>";
});
document.write(csv);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='main'>
<div data-store="&#123;&quot;timestamp&quot;:8479216890119,&quot;author&quot;:8819156222,&quot;uuid&quot;:&quot;mid.8473116890448:a31179k549&quot;&#125;" data-sigil="message-text">
    <span>A message1</span>
</div>
<div data-store="&#123;&quot;timestamp&quot;:8479216890119,&quot;author&quot;:8819156222,&quot;uuid&quot;:&quot;mid.8473116890448:a31179k549&quot;&#125;" data-sigil="message-text">
    <span>A message2</span>
</div>
<div data-sigil="message-text">
    <span>A message3</span>
</div>
</div>

＆＃13;

Answer 2

该代码应该由javascript本身解析，转换特殊字符。它是一个json对象，因此您可以对其进行解码并检索您想要的内容。

请注意，对于您想要的rappresentation，我同时使用了\n和<br>。由于您要在文档上打印，因此<br>。

就足够了

修改

我忘了指出您可以使用数据存储属性直接检索所有div。

你应该考虑的精明是在使用之前检查json属性是否存在。即`让time_stamp =（data.timestamp！= undefined）？ data.timestamp：null;

＆＃13;
＆＃13;
let csv = 'timestamp,author,text\n<br>'; $('div[data-store]').each(function() { let data = $.parseJSON($(this).attr('data-store')); csv += data.timestamp + ',' + data.author + ',' + $(this).find('span').html() + '\n<br>'; }); document.write(csv);
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div data-store="{"timestamp":8479216890119,"author":8819156222,"uuid":"mid.8473116890448:a31179k549"}" data-sigil="message-text"> <span>A message</span> </div>
＆＃13;
＆＃13;
＆＃13;

从div元素中提取内容

2 个答案: