从字符串中移除强标记及其内容

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

与其试图操作字符串，不如将CSS规则应用到将其放入DOM中的任何地方：

strong { display: none; }

Answer 2

您可以为此使用DOM：

​

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 3

将字符串解析为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>';

​