Verwenden von Regex, um HTML in div zu ersetzen und Abstände hinzuzufügen

Question

Hallo, ich würde gerne beim Erstellen eines regulären Ausdrucks helfen, der alle HTML-Tags ersetzt, aber wenn das End-Div und das Anfangs-Div nebeneinander liegen, wird ein Leerzeichen wie

hinzugefügt

此<b>is</b> <div>a</div><div>test</div>

这是一个测试

Mein aktueller regulärer Ausdruck ist /(<([^>]+)>)/ig, der alle HTML-Tags ersetzt, aber ich möchte wissen, wie ich jedes Mal, wenn es ein schließendes Div und das folgende öffnende Div gibt, jeweils ein Leerzeichen hinzufüge andere.

Ich habe versucht, gültiges HTML durch /(<([^>]+)>)/ig zu ersetzen, aber ich brauche Hilfe beim Div-Abstand, wenn sie nebeneinander liegen

Answer 1

JS 内置了对 HTML 解析的支持。使用它来代替：

function getSpaceSeparatedText(html) {
  // Create an element and use it as a parser
  let parser = document.createElement('div');
  
  parser.innerHTML = html;
  
  const result = [];
  
  for (const node of parser.childNodes) {
    // Get the trimmed text
    const text = node.textContent.trim();
    
    // If text is not empty, add it to result
    if (text) {
      result.push(text);
    }
  }
  
  return result.join(' ');
}

尝试一下：

console.config({ maximize: true });

function getSpaceSeparatedText(html) {
  let parser = document.createElement('div');
  
  parser.innerHTML = html;
  
  const result = [];
  
  for (const node of parser.childNodes) {
    const text = node.textContent.trim();
    
    if (text) {
      result.push(text);
    }
  }
  
  return result.join(' ');
}

const html = `
This is 
a
test
`;

console.log(getSpaceSeparatedText(html));