被分割<br>并避免在字符串中使用强标签

Question

我在我的母语中有以下 html 代码，我正在尝试将其转换为我可以处理的数组。 所以我想要的是将它拆分成一个数组，在其中避免强标签并按<br>拆分，但不添加带有最后一个<br>的空对象

到目前为止我有这个

var ingredients = $('div.ingredients p').html().replace(/<(?!br\s*\/?)[^>]+>/g, '').split("<br>");

html

<p>
    <strong>Dressing: </strong>
    <br>
    2-3 spsk græsk yoghurt, gerne 10 % 
    <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>

期望的输出

["2-3 spsk græsk yoghurt, gerne 10 %", "1 lille spsk god mayonnaise", "1-2 tsk æbleeddike", "1-2 tsk honning", "himalayasalt og friskkværnet hvid peber"]

Answer 1

您可以使用pop()删除最后一个元素。

var ingredients = $('div.ingredients p').html().replace(/<(?!br\s*\/?)[^>]+>/g, '').split("<br>");

ingredients.pop();

//[" Dressing:  ", " 2-3 spsk græsk yoghurt, gerne 10 % ", " 1 lille spsk god mayonnaise ", " 1-2 tsk æbleeddike ", " 1-2 tsk honning ", " himalayasalt og friskkværnet hvid peber "]

Answer 2

假设最后一个 br 可能存在或不存在（或者更糟的是可以有多个 br），最好的办法是在拆分后过滤掉空元素

就像是：

$('div.ingredients p')
  .html()
  .replace(/<(?!br\s*\/?)[^>]+>/g, '')
  .split("<br>")
  .filter(function(e) { return e.trim() !== ''})

我也觉得你必须用 '' 替换 , 和 \\n

Answer 3

如果你想使用原生 ES6 Javascript：

function split(selector) {
  const elem = document.querySelector(selector);
  const content = elem && elem.innerHTML;
  if (!content) { return null; }

  return content
      .split('<br>')
      .map(it => it.trim())
      .filter(it => !!it && !it.startsWith('<strong>'));
}

与：

const res = split('div.ingredients p')
console.log(res);

输出是：

["2-3 spsk græsk yoghurt, gerne 10 %", "1 lille spsk god mayonnaise", "1-2 tsk æbleeddike", "1-2 tsk honning", "himalayasalt og friskkværnet hvid peber"]