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

【问题标题】：Selecting multiple substrings from string JavaScript从字符串 JavaScript 中选择多个子字符串
【发布时间】：2018-05-25 03:00:08
【问题描述】：

问题：

我有一个大字符串（它是 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" 
}]

字符串的样子：

这是字符串的简化版本。原来的包含更多字符和更多标签，如 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 知识是否足以解决这个问题。非常感谢您的帮助！

【问题讨论】：

所以你想达到什么目的？
查看 HTML 解析和 JavaScript。这是你最好的方法。
@messerbill 我正在尝试从这个字符串中捕获数据值！

标签： javascript arrays string substring push

【解决方案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 现在将被对象值填充。

祝你好运！

【讨论】：

很好的解决方案！我在服务器端工作，所以不必使用虚拟 div 真的很棒。谢谢！
很高兴它对您有所帮助 :D 将其标记为已接受的答案 :)

【解决方案2】：

如果您有一个 str 变量来保存您的 HTML，您将创建并将其附加到虚拟 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);

【讨论】：

【解决方案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标签。

【讨论】：