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

将定位文本转换为列表项

jquery javascript

-1

Sireini · 技术社区 · 7 年前

我有一个锚文本,希望将其拆分并转换为列表项(项目符号)

在这里,我使用jquery获取特定锚的文本:

var productDetails = $('.product-info .product-name').find('a');

console.log(productDetails.text());

这导致了这个列表:

Whiteboard 80x110 cm - Magnetisch
Whiteboard 60x90 cm - Magnetisch
Whiteboard 60x90 cm - Magnetisch / Emaille
Whiteboard 90x120 cm - Magnetisch / Emaille
Skin Whiteboard 75x115 cm - Wit
Skin Whiteboard 75x115 cm PRO - Polyester coating
Frameless whiteboard - Rechte hoeken - 58x88 cm
Frameless whiteboard - Rechte hoeken - 78x108 cm
Frameless whiteboard - Rechte hoeken - 88x118 cm
Frameless whiteboard - Rechte hoeken - 88x178 cm

我怎么能把这些分成以下几部分:

白板
80x110厘米
磁学

希望有人能帮我,因为我真的不知道怎么拆线。最合理的做法是在第一个数字和 - 冲刺。

我试着把它分成这样:

console.log(productDetails.split("-"), productDetails.match(/\d+/g).map(Number));

这将产生一个文本数组,最后一个单词被拆分如下:

0:" Whiteboard 80x110 cm "
1:" Magnetisch                Whiteboard 60x90 cm "

一个数组,所有的数字都是这样拆分的:

0:80
1:110

但是我怎样才能做一个很好的分割,这样我就不必合并这个输出。

2 回复 | 直到 7 年前

onyx 7 年前

你可以通过 regular expression 和弦 split . 因为您的数据不一致,所以没有一种干净的方法可以做到这一点。一种方法是例如。

 1. Split the output on the dimension, i.e. `58x88 cm`
 2. Remove all white spaces and dashes
 3. Concat the result

这是一个示例代码

var input = [
    'Whiteboard 80x110 cm - Magnetisch',
    'Whiteboard 60x90 cm - Magnetisch',
    'Whiteboard 60x90 cm - Magnetisch / Emaille',
    'Whiteboard 90x120 cm - Magnetisch / Emaille',
    'Skin Whiteboard 75x115 cm - Wit',
    'Skin Whiteboard 75x115 cm PRO - Polyester coating',
    'Frameless whiteboard - Rechte hoeken - 58x88 cm',
    'Frameless whiteboard - Rechte hoeken - 78x108 cm',
    'Frameless whiteboard - Rechte hoeken - 88x118 cm',
    'Frameless whiteboard - Rechte hoeken - 88x178 cm',
];

function trimCharacters(s) {
    return s.replace(/^(\s|-)+|(\s|-)+$/g, '')
}

function bulletList(text) {
    if (!text) {
        return;
    }
    var items = text.split(/(\d+x\d+ cm)/).filter(Boolean).map(x => trimCharacters(x));
    if (items.length === 3) {
        return items;
    }
    var res = items[0].split('-').map(item => trimCharacters(item));

    return [res[0], items[1], res[1]];
}

input.forEach(text => {
    var data = bulletList(text);
    var list = $('<ul></ul>');
    
    data.forEach(item => {
        list.append(`<li>${item}</li>`);
    });

    $('.data-list').append(list);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="data-list"></div>

注意 :由于数据不一致,此代码仅适用于提供的模式。
另外,此代码是用 Ecmascript 所以你可能想 透明的 它与普通的javascript兼容。

Kaleem Nalband 7 年前

var main_array=[];
$('.product-info .product-name a').each(function(){
var array=$(this).text().split(" ");
main_array.push(array);
});

console.log(main_array);

主数组将有字符串,使用索引语法访问所需的字符串。