如何去除JoditEditor内容的HTML标签并保留格式展示？

针对你用JoditEditor获取带HTML格式内容后，需要去除标签但保留格式的需求，这里提供几种实用的实现方式：

方法1：HTML转Markdown后渲染 #

因为你的Jodit仅使用了bold/italic/underline这类简单格式，可将生成的HTML转换为Markdown纯文本标记，再通过Markdown渲染库展示，既去掉HTML标签，又保留格式，还能避免XSS风险。

步骤： #

1. 安装Markdown渲染库：

npm install react-markdown

2. 编写HTML转Markdown的工具函数：

const htmlToMarkdown = (html) => {
  return html
    .replace(/<b>(.*?)<\/b>/g, '**$1**') // 加粗转Markdown粗体
    .replace(/<i>(.*?)<\/i>/g, '*$1*')   // 斜体转Markdown斜体
    .replace(/<u>(.*?)<\/u>/g, '__$1__') // 下划线转Markdown下划线
    .replace(/<br\s*\/?>/g, '\n')        // 换行转换行符
    .replace(/<p>(.*?)<\/p>/g, '$1\n\n');// 段落转换行分隔
};

3. 在组件中使用渲染：

import ReactMarkdown from 'react-markdown';

// 假设你的state是content（存储Jodit获取的HTML内容）
const formattedContent = htmlToMarkdown(content);

return (
  <div className="content-display">
    <ReactMarkdown>{formattedContent}</ReactMarkdown>
  </div>
);

方法2：解析HTML生成带样式的React元素 #

如果不想依赖Markdown库，可直接解析HTML节点，将对应格式的文本替换为带CSS类的React元素，纯前端处理格式展示。

步骤： #

1. 编写HTML解析函数：

const parseHtmlToStyledText = (html) => {
  const parser = new DOMParser();
  const doc = parser.parseFromString(html, 'text/html');
  const elements = [];

  const traverseNode = (node, index) => {
    // 处理文本节点
    if (node.nodeType === Node.TEXT_NODE) {
      if (node.textContent.trim()) elements.push(node.textContent);
      return;
    }

    let styleClass = '';
    // 根据HTML标签匹配样式类
    switch (node.tagName.toLowerCase()) {
      case 'b': styleClass = 'font-bold'; break;
      case 'i': styleClass = 'font-italic'; break;
      case 'u': styleClass = 'text-underline'; break;
      case 'p': styleClass = 'mb-4'; break;
      case 'br': elements.push(<br key={`br-${index}`} />); return;
    }

    // 递归处理子节点
    const childElements = Array.from(node.childNodes)
      .map((child, idx) => traverseNode(child, `${index}-${idx}`));
    
    // 包裹样式类
    if (styleClass) {
      elements.push(
        <span key={`span-${index}`} className={styleClass}>
          {childElements}
        </span>
      );
    } else {
      elements.push(...childElements);
    }
  };

  traverseNode(doc.body, 0);
  return elements;
};

2. 添加对应的CSS样式：

.font-bold { font-weight: 700; }
.font-italic { font-style: italic; }
.text-underline { text-decoration: underline; }
.mb-4 { margin-bottom: 1rem; }

3. 组件中使用：

const styledContent = parseHtmlToStyledText(content);

return (
  <div className="content-display">
    {styledContent}
  </div>
);

方法3：直接用Jodit的Markdown模式（从源头避免HTML） #

如果希望获取的内容本身就是无HTML的纯文本格式，可开启Jodit的Markdown模式，这样编辑器直接生成Markdown标记的内容，无需后续转换：

const config = useMemo(
  () => ({
    readonly: false,
    buttons: ["bold", "italic", "underline"],
    mode: 'markdown', // 启用Markdown编辑模式
  }),
  []
);

// Jodit组件使用配置
<JoditEditor
  ref={editor}
  value={content} // 此时content为Markdown格式纯文本
  tabIndex={2}
  onChange={(newContent) => setContent(newContent)}
  config={config}
/>

展示时直接用ReactMarkdown渲染即可，完全无HTML标签。

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