代码之家 › 专栏 › 技术社区 › Nova

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

push substring string arrays javascript

Nova · 技术社区 · 6 年前

问题是:

我有一个大字符串(HTML格式),我需要从中选择多个子字符串,然后将它们放入一个对象数组中。请注意:I 无法更改 原始字符串。下面的示例是一个简化版本。

我需要什么:

包含“配方”信息的对象数组,如下所示:

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知识是否能够解决这个问题。非常感谢您的帮助!

3 回复 | 直到 6 年前

Alen Zarkovic 6 年前

首先,您可以使用分隔符“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现在将填充对象值。

祝你好运

Carl Edwards monkbroc 6 年前

如果你有 str 保存HTML的变量,您可以创建并将其附加到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);

Marcelo Origoni 6 年前

我会获取字符串,并将其放置在一个伪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标签。