从字符串 JavaScript 中选择多个子字符串

Question

问题：

我有一个大字符串（它是 HTML 格式），我需要从中提取 select 多个子字符串，然后将它们推入 objects 的数组中。请注意：我无法更改 原始字符串。下面的例子是一个简化版本。

我需要的：

包含 "recipes" 信息的 objects 数组，如下所示：

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

字符串的样子：

这是字符串的简化版本。原始的包含更多字符和更多标签，如 href 等。所以我不能只过滤这些子字符串。如您所见，图片的标题 link 和 link 出现了不止一次。因此，将哪个副本推入数组并不重要，只要它们属于它们的 'parent' 配方即可。

<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

首先，您将使用定界符 "section" 进行字符串拆分。这将为您提供 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

如果您有一个 str 变量保存您的 HTML，您将创建它并将其附加到虚拟 div。从那里映射到各个部分并相应地分配 key/value 对：

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

然后，寻找section标签，解析属性，然后寻找a标签，解析你需要的信息。使用此信息，您填充一个对象，然后将其推入数组，如下所示：

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

您还可以提取任何其他需要的数据。此示例还假设第一个 a 标签具有您需要的信息，并且第一个图像具有您需要的图片，并且始终至少有 1 个 a 标签和 1 个 img 标签。

从字符串 JavaScript 中选择多个子字符串

Selecting multiple substrings from string JavaScript

javascript

arrays

string

push

substring