Angular 5：如何从服务器响应中同时显示HTML与XML

Got it, let's break down how to handle this scenario where your server returns a string with both escaped HTML (that needs rendering) and escaped XML (that needs to show as plain text).

First, let's restate the problem clearly: your server sends something like this:

This is sample text with <b>bold text</b> and also some xml like this <note><to>you</to><from>me</from><heading>title</heading><body>message</body></note>

You want the <b> tags to render as bold text, but the <note>/<to> etc. tags to show up as literal text (like <note><to>you</to>...).

Here are three straightforward approaches depending on your needs:

1. Selective Unescaping (Simplest, if you know your HTML tags) #

If you know exactly which HTML tags are present (like <b>, <i>, etc.), you can directly replace their escaped entities with the actual tags, leaving the XML entities untouched. This is the fastest method.

Example in JavaScript:

const serverResponse = 'This is sample text with <b>bold text</b> and also some xml like this <note><to>you</to><from>me</from><heading>title</heading><body>message</body></note>';

// Replace escaped HTML tags with their actual counterparts
const processedContent = serverResponse
  .replace(/&lt;b&gt;/g, '<b>')
  .replace(/&lt;\/b&gt;/g, '</b>')
  // Add more lines for other HTML tags, e.g.:
  // .replace(/&lt;i&gt;/g, '<i>')
  // .replace(/&lt;\/i&gt;/g, '</i>');

// Insert into your DOM to render
document.getElementById('content-container').innerHTML = processedContent;

When rendered, this will show bold text and the full XML as literal tags.

2. Unescape All, Then Re-Escape XML Tags (Good if you know XML tags) #

If you know the XML tag names (like note, to, etc.), you can first unescape the entire string to get raw tags, then re-escape only the XML ones so they display as text.

Example:

const serverResponse = 'This is sample text with <b>bold text</b> and also some xml like this <note><to>you</to><from>me</from><heading>title</heading><body>message</body></note>';

// Helper to unescape HTML entities
function unescapeHtml(str) {
  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = str;
  return tempDiv.textContent;
}

// Helper to escape specific XML tags
function escapeXmlTags(str, xmlTagList) {
  xmlTagList.forEach(tag => {
    const openTag = new RegExp(`<${tag}>`, 'g');
    const closeTag = new RegExp(`</${tag}>`, 'g');
    str = str.replace(openTag, `&lt;${tag}&gt;`);
    str = str.replace(closeTag, `&lt;/${tag}&gt;`);
  });
  return str;
}

// Step 1: Unescape everything to get raw tags
let processed = unescapeHtml(serverResponse);
// Step 2: Re-escape the XML tags we want to show as text
processed = escapeXmlTags(processed, ['note', 'to', 'from', 'heading', 'body']);

// Render the result
document.getElementById('content-container').innerHTML = processed;

3. DOM Parsing (Flexible for unknown tags) #

If you don't know the exact HTML/XML tags in advance, you can parse the string as HTML, then convert any non-standard HTML elements (your XML tags) into text nodes with their tag names.

Example:

const serverResponse = 'This is sample text with <b>bold text</b> and also some xml like this <note><to>you</to><from>me</from><heading>title</heading><body>message</body></note>';

const parser = new DOMParser();
const doc = parser.parseFromString(serverResponse, 'text/html');
const body = doc.body;

// List of standard HTML tags you want to keep rendered
const allowedHtmlTags = ['b', 'i', 'u', 'p', 'span', 'h1', 'h2'];

// Walk through all elements and convert non-allowed ones to text
Array.from(body.querySelectorAll('*')).forEach(element => {
  const tagName = element.tagName.toLowerCase();
  if (!allowedHtmlTags.includes(tagName)) {
    // Create text with the tag and its content
    const tagText = `<${tagName}>${element.textContent}</${tagName}>`;
    const textNode = doc.createTextNode(tagText);
    element.replaceWith(textNode);
  }
});

// Get the final processed HTML and render it
document.getElementById('content-container').innerHTML = body.innerHTML;

All three methods will give you the desired result: rendered HTML where needed, and plain XML tags displayed as text. Pick the one that fits your specific use case best!

内容的提问来源于stack exchange，提问作者Thibs