使用render()时HTML代码显示异常，如何将含HTML字段转为纯文本？

Hey there! Let's break down your two issues and fix them up—they're super common when dealing with content rendering, so I’ve got straightforward solutions for you.

First off, most modern frontend frameworks (like React, Vue, Angular) automatically escape HTML by default to prevent XSS attacks—this is exactly why your HTML tags are showing up as plain text instead of being rendered properly.

If you're using React:
Instead of passing HTML directly in your render output, use dangerouslySetInnerHTML to tell React you trust the content and want it rendered as actual HTML. Here's a quick example:

function MyComponent() {
  const htmlContent = '<p>This should render as a proper paragraph</p>';
  return <div dangerouslySetInnerHTML={{ __html: htmlContent }} />;
}

⚠️ Heads up: Only use this if you’re 100% sure the HTML content is safe (no untrusted user-generated data), otherwise you risk opening up XSS vulnerabilities.

If you're using Vue:
Swap out the double curly braces {{ htmlContent }} (which escapes HTML) with the v-html directive:

<template>
  <div v-html="htmlContent"></div>
</template>

<script>
export default {
  data() {
    return {
      htmlContent: '<p>This should render as a proper paragraph</p>'
    }
  }
}
</script>

If you're working with vanilla JavaScript and a custom render function:
Make sure you’re setting the element’s innerHTML property instead of textContent or innerText. Like this:

function renderHtml(elementId, html) {
  const element = document.getElementById(elementId);
  element.innerHTML = html; // This renders HTML correctly
  // element.textContent = html; // This would show plain text tags
}

To strip HTML tags and get clean plain text from your description field, you’ve got two solid options:

方法1：利用DOM元素（推荐，更可靠） #

Create a temporary hidden DOM element, inject the HTML into it, then extract the text content. This handles edge cases like nested tags, HTML comments, and special characters way better than regex.

function convertHtmlToPlainText(html) {
  if (!html) return '';
  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = html;
  // textContent works in most modern browsers; innerText is a fallback for older ones
  return tempDiv.textContent || tempDiv.innerText || '';
}

// Usage example:
const descriptionWithHtml = '<strong>Hello</strong> <em>world!</em> <p>This is a test paragraph.</p>';
const plainText = convertHtmlToPlainText(descriptionWithHtml);
console.log(plainText); // Output: "Hello world! This is a test paragraph."

方法2：正则表达式（简单，适合基础场景） #

If you don’t want to mess with DOM elements, you can use a regex to strip out all HTML tags. Note that this won’t handle complex cases like malformed HTML or attributes with angle brackets perfectly, but it works for simple scenarios.

function convertHtmlToPlainText(html) {
  if (!html) return '';
  return html.replace(/<[^>]+>/g, '');
}

// Usage example:
const descriptionWithHtml = '<strong>Hello</strong> <em>world!</em>';
const plainText = convertHtmlToPlainText(descriptionWithHtml);
console.log(plainText); // Output: "Hello world!"

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