vue h3 不换行

### Vue3 中展示 JSON 字符串的方法 在 Vue3 中展示 JSON 字符串可以通过以下方式实现。首先，可以使用 JavaScript 的 `JSON.stringify()` 方法将对象转换为 JSON 字符串，并通过模板插值绑定到页面上。为了使 JSON 格式更加直观，可以设置 `JSON.stringify()` 的第二个参数（replacer）和第三个参数（space），以生成带有缩进的格式化字符串[^1]。 以下是具体的示例代码： ```vue <template> <div> <h3>JSON 数据展示</h3> <pre>{{ formattedJson }}</pre> </div> </template> <script> import { ref, computed } from "vue"; export default { setup() { // 定义原始 JSON 数据 const jsonData = ref({ products: [ { id: 1, productName: "P01", price: "114.00" }, { id: 2, productName: "P02", price: "333.00" }, { id: 3, productName: "P03", price: "743.00" }, { id: 4, productName: "P04", price: "449.00" }, ], }); // 使用 computed 属性生成格式化的 JSON 字符串 const formattedJson = computed(() => JSON.stringify(jsonData.value, null, 2) // 设置缩进为 2 个空格 ); return { jsonData, formattedJson, }; }, }; </script> <style scoped> pre { background-color: #f4f4f4; padding: 10px; border-radius: 5px; white-space: pre-wrap; word-wrap: break-word; } </style> ``` #### 代码解析 - `<pre>` 标签用于保留 JSON 字符串中的换行和缩进，确保输出格式整齐[^1]。 - `JSON.stringify()` 方法的第三个参数设置为 `2`，表示生成的 JSON 字符串将具有两级缩进。 - 使用 Vue3 的 `computed` 属性动态计算格式化后的 JSON 字符串，确保数据变化时自动更新显示内容[^2]。 此外，如果需要更复杂的交互功能（如折叠/展开 JSON 结构），可以引入第三方库，例如 `vue-json-pretty`，它提供了丰富的配置选项和样式支持[^3]。 ### 引入 vue-json-pretty 示例 安装依赖： ```bash npm install vue-json-pretty ``` 使用组件： ```vue <template> <div> <h3>JSON 数据展示 (vue-json-pretty)</h3> <vue-json-pretty :data="jsonData" /> </div> </template> <script> import VueJsonPretty from "vue-json-pretty"; import "vue-json-pretty/lib/styles.css"; // 引入样式文件 import { ref } from "vue"; export default { components: { VueJsonPretty, }, setup() { const jsonData = ref({ products: [ { id: 1, productName: "P01", price: "114.00" }, { id: 2, productName: "P02", price: "333.00" }, { id: 3, productName: "P03", price: "743.00" }, { id: 4, productName: "P04", price: "449.00" }, ], }); return { jsonData, }; }, }; </script> ``` #### 第三方库优势 `vue-json-pretty` 提供了交互式 JSON 展示功能，用户可以点击节点展开或折叠内容，适合需要高级功能的场景[^3]。 ---

<think>嗯，用户之前问过关于extractContent函数的问题，现在提到在uni-app中不支持，需要解决这个问题。首先，我需要回想一下uni-app的环境限制。uni-app是基于Vue.js的跨平台框架，但它在不同的平台（比如小程序、H5、App）上有不同的运行环境。可能的问题点在于DOMParser在非浏览器环境中的支持情况。 用户可能在使用uni-app开发时，尝试在微信小程序或其他不支持DOMParser的环境下运行原来的代码，导致出错。这时候需要找到一个替代方案来解析HTML并提取特定元素的内容。原来的代码使用了DOMParser和querySelector，这在浏览器中可行，但在小程序中不行，因为小程序没有DOM API。 接下来，我需要考虑有哪些替代方法可以在uni-app中解析HTML。可能的方法包括使用正则表达式、第三方库如cheerio，或者uni-app自身的组件和API。但需要确保这些方法在uni-app支持的所有平台上都有效，尤其是小程序环境。 首先，正则表达式可能是一个轻量级的解决方案，但不够健壮，容易出错，特别是处理复杂的HTML结构时。而cheerio是一个服务器端的jQuery实现，依赖于Node.js环境，可能在uni-app的小程序环境中无法直接使用，除非进行适当的适配或使用兼容版本。 然后，uni-app自身是否有解析HTML的能力？比如，使用rich-text组件渲染HTML内容，但用户的需求是提取特定class的内容，而不是直接渲染。这时候可能需要结合字符串操作和正则表达式来提取所需的部分。 另外，用户可能需要动态渲染提取后的HTML内容，这时候在uni-app中可能需要使用v-html指令或者rich-text组件，但需要注意安全性和跨平台兼容性。 综合考虑，可能的解决方案是提供一个使用正则表达式的替代函数，或者寻找可以在uni-app中使用的HTML解析库。同时，需要注意不同平台上的兼容性问题，比如在小程序中使用正则表达式，而在H5中可能继续使用DOMParser。 此外，用户可能没有意识到平台差异导致的API不可用，因此需要解释清楚原因，并提供替代方案。同时，提醒用户在处理HTML时注意XSS安全问题，尤其是在动态渲染内容时。 最后，可能需要给出代码示例，展示如何在uni-app中实现类似功能，同时处理多平台兼容性，并建议使用第三方库如cheerio的条件使用，或者推荐使用uni-app的组件来达到目的。</think>了解！针对 uni-app 的环境特点，以下是完整的解决方案和代码实现： --- ### 问题核心分析 `DOMParser` 是浏览器专用 API，而 uni-app 运行在小程序等非浏览器环境时会出现兼容性问题。我们需要 **寻找跨平台兼容的 HTML 解析方案**。 --- ### 解决方案代码 ```typescript // 跨平台HTML解析工具函数 function extractContent(str: string): string { // 平台能力检测 if (typeof DOMParser !== 'undefined') { // H5环境使用原生解析 const parser = new DOMParser(); const doc = parser.parseFromString(str, 'text/html'); const target = doc.querySelector('.save_doccout_wrap'); return target?.innerHTML || str; } else { // 非H5环境使用正则解析 const regex = /<div[^>]*class\s*=\s*["']?save_doccout_wrap[^>]*>([\s\S]*?)<\/div>/i; const match = str.match(regex); return match?.[1]?.trim() || str; } } // 安全渲染方法（兼容小程序） const renderSafeHTML = (html: string) => { // #ifdef H5 return html; // H5可直接使用v-html // #endif // #ifndef H5 return { nodes: html // 小程序需用rich-text组件 }; // #endif } ``` --- ### 分步实现说明 #### 阶段一：环境适配解析 1. **H5浏览器环境** - 保留原生`DOMParser`方案 - 通过`querySelector`精准定位元素 2. **小程序/App环境** - 使用正则表达式匹配目标容器 - 正则表达式说明： ```regex /<div[^>]*class\s*=\s*["']?save_doccout_wrap[^>]*>([\s\S]*?)<\/div>/i ``` - `[^>]*` 跳过非闭合的div属性 - `([\s\S]*?)` 捕获任意内容（包括换行） - `i` 标志忽略大小写 #### 阶段二：安全渲染方案 ```vue <template> <!-- H5环境使用标准渲染 --> <div v-if="isH5" v-html="processedContent"></div> <!-- 小程序环境使用rich-text --> <rich-text v-else :nodes="processedContent.nodes"></rich-text> </template> <script> export default { computed: { isH5() { // #ifdef H5 return true; // #endif return false; }, processedContent() { const raw = extractContent(sourceHTML); return renderSafeHTML(raw); } } } </script> ``` --- ### 性能优化建议 1. **缓存机制** ```typescript const parserCache = new Map(); function cachedExtract(str: string) { if (parserCache.has(str)) return parserCache.get(str); const result = extractContent(str); parserCache.set(str, result); return result; } ``` 2. **动态加载策略** ```javascript // 按需加载cheerio（需要配置uni-app的npm支持） async function advancedParse(str) { if (process.env.VUE_APP_PLATFORM === 'h5') { return extractContent(str); } else { const cheerio = await import('cheerio'); const $ = cheerio.load(str); return $('.save_doccout_wrap').html() || str; } } ``` --- ### 安全防护方案 ```typescript // 安装依赖：npm install xss import xss from 'xss'; function sanitizeHTML(html: string) { return xss(html, { whiteList: { div: ['class'], h1: [], h2: [], h3: [], p: [], br: [], img: ['src'] }, stripIgnoreTagBody: true }); } // 在extractContent后调用 const safeContent = sanitizeHTML(extractContent(rawStr)); ``` --- ### 不同场景测试案例 | 输入类型 | 测试样例 | 预期输出 | |---------|---------|---------| | 标准结构 | `<div class="save_doccout_wrap"><p>内容</p></div>` | `<p>内容</p>` | | 异常嵌套 | `<div class='save_doccout_wrap'><script>alert()</script>` | 空或消毒后内容 | | 无目标元素 | `<div class="other">测试</div>` | 原始字符串 | | 超大文档 | 10MB HTML文档 | 正则解析需<500ms | 需要我提供具体平台的适配演示（如微信小程序与H5的差异实现）吗？