从字符串

Question

我在这个html下面有字符串，我想知道如何从字符串中删除/过滤所有强标记及其文本？

HTML

<p>
    <br>
    2-3 spsk græsk yoghurt, gerne 10 % 
    <strong>Dressing: </strong>
    <br>
    1 lille spsk god mayonnaise
    <br>
    1-2 tsk æbleeddike 
    <br>
    1-2 tsk honning 
    <br>
    himalayasalt og friskkværnet hvid peber
    <br>
</p>

到目前为止我已经拥有了这个，但是如果它位于顶部

，似乎只会删除强标记

var ingredientsArray = ingredients.split('<br>').map(it => it.trim()).filter(it => !!it && !it.startsWith('<strong>'));

Answer 1

您可以使用DOM API：

function stripStrong(html) {
    var span = document.createElement('span');
    span.innerHTML = html;
    [...span.getElementsByTagName('strong')].reverse().forEach( 
        strong => strong.parentNode.removeChild(strong)
    );
    return span.innerHTML;
}

var html = `<p>
    <br>
    2-3 spsk græsk yoghurt, gerne 10 % 
    <strong>Dressing: </strong>
    <br>
    1 lille spsk god mayonnaise
    <br>
    1-2 tsk æbleeddike 
    <br>
    1-2 tsk honning 
    <br>
    himalayasalt og friskkværnet hvid peber
    <br>
</p>`;

console.log(stripStrong(html));

请注意，如果strong标记包含属性，样式，与其他strong标记嵌套等等，这也适用于正则表达式可能遇到问题的内容。

Answer 2

将字符串解析为HTML很可能是要走的路，具体取决于目标是什么？

var ingredients = '<p><br>2-3 spsk græsk yoghurt, gerne 10 % <strong>Dressing: </strong><br>1 lille spsk god mayonnaise<br>1-2 tsk æbleeddike <br>1-2 tsk honning <br>himalayasalt og friskkværnet hvid peber<br></p>';

var doc = new DOMParser().parseFromString(ingredients, 'text/html');

[].forEach.call(doc.querySelectorAll('strong'), function (item) {
    item.parentNode.removeChild(item);
});

document.body.innerText = '<pre>' + doc.body.innerHTML + '</pre>';

Answer 3

不是试图操纵字符串，而是将CSS规则应用到将要放入DOM的任何位置：

strong { display: none; }

Answer 4

您可以使用正则表达式：

var ingredientsArray = ingredients.replace(/<strong>[\s\S]*?<\/strong>/g, '')
     .split('<br>').map(it => it.trim()).filter(Boolean);