如何在JavaScript中不使用输入类型文件读取包含html的文本文件?

2024-02-20

我有一个文本文件assets包含一些要在特定组件的 div 中呈现的 html 的文件夹。

有没有一种方法可以读取该文件并将内容分配给字符串变量,而无需用户与 ngOnInit 中的视图(具有输入文件类型)进行交互。

我的发现如果我将 html 内容放入 json 对象中,我们将必须从中删除所有换行符。这意味着它将是一个没有像这样换行的字符串。

{
  "html": "<h1 class=\"user\">Name</h1><p>Ahsan</p>"
}

这对设计者来说是有限制的,他们会将 html 转换为多行字符串,我们还将删除转义序列。

如何通过文本文件实现这一点。

这样做的原因

我想这样做是因为,我想避免为某些内容更改而重建和发布整个角度应用程序。即使对于某些内容更改,我也必须重建并重新发布应用程序。


问题很模糊,所以我只列出一些要研究的选项:

1)首先,如果这是一个浏览器页面,您可以在服务器上提供html页面并向客户端请求它。

2) 或者,您可以使用构建步骤将某些变量值替换为 HTML 文件的内容。这将避免解决方案(1)的HTTP请求。

3)另一方面,如果这是一个节点(或电子)应用程序,除了解决方案(2)之外,您还可以使用节点的fs访问 HTML 文件。

4) 最后,也许是最简单但最不畅销的解决方案,将 HTML 放入 JS 对象中。与 JSON 不同,JS 对象可以支持换行;例如

let x = {
    str: `line 1
          line 2`
};

尽管即使您想使用 JSON 文件,您也可以包含转义的新留置权\n在字符串中。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在JavaScript中不使用输入类型文件读取包含html的文本文件? 的相关文章

随机推荐

  • 从 QML 访问 QList 时 QT/QML C++ 程序崩溃

    我有 2 个用于数据处理的类 CGameList 和 Game 我在 qml 中定义了一个 GameList gamelist 对象来使用它 我有一个列表视图 显示此游戏列表中的游戏 editGames open 如果我单击此列表中的一个条
  • 朱莉娅中固定大小数组的最佳传递维度

    我想编写一个以矩阵作为输入的函数 这是复杂项目中频繁的低级调用 因此使该函数尽可能快可能会产生严重的性能影响 因为速度对我来说非常重要 所以我使用以下类型FixedSizeArrays据我所知 这将节省内存使用 但我经常知道输入矩阵的某些属
  • JMeter 使用什么 Maven 插件? jmeter-maven-plugin 还是 chronos-jmeter-maven-plugin?

    我需要设置由 CI 系统自动触发运行的性能测试 为此 我想使用 JMeter 因为已经存在一些脚本和经验 并且我想将其与 Maven 结合起来 在我对合理插件的研究过程中 我发现存在两个插件 jmeter maven 插件 http wik
  • 无论我输入什么参数,速度函数都不会改变海龟的位置

    我制作的程序有两只海龟 一只是用户 玩家 另一只是玩家 2 它们通过一个名为 checkcollision 的函数运行 该函数确定海龟是否相交 从而将第二只海龟的 x 和 250 250 移动到 250 250 的随机位置y 坐标 然而问题
  • BULK INSERT 失败,行终止符位于最后一行

    我正在将使用 cygwin shell 命令编译的 CSV 导入 MS SQL 2014 使用 BULK INSERT import from D tail csv WITH FIELDTERMINATOR ROWTERMINATOR r
  • 如何使用 QSettings 在 Qt 应用程序中加载设置

    有两种可能的方法 将所有设置加载到某个结构中 按需加载值 哪种方法更好 这取决于您将如何使用您的设置文件 您是否希望允许您的应用程序的用户动态地更改文件中的设置 例如 ini 文件 或者必须通过 GUI 来设置设置 如果您使用某些 GUI
  • d3.js v5 - Promise.all 替换 d3.queue

    我已经使用 d3 js v4 一段时间了 我了解到 Mike Bostock 已将 v5 版本中的 d3 queue 替换为 Promise 原生 JavaScript 对象 我想与您核实一下我编写的这段代码是否正确地 异步 这些 URL
  • Java 中 Date(String s) 的未弃用的完全等效项?

    我有旧代码使用new Date dateString 解析日期字符串 编译代码会产生弃用警告Date java lang String in java util Date has been deprecated javadoc无益地建议我使
  • 带有 lxml 子路径的 XPath 谓词?

    我试图理解发送给我的用于 ACORD XML 表单 保险中的常见格式 的 XPath 他们发给我的 XPath 是 为了简洁而被截断 PersApplicationInfo InsuredOrPrincipal InsuredOrPrinc
  • Hudson -CI 屏幕保护程序设置

    您好 有没有我可以设置一个屏幕保护程序 其中包含在 hudson 中运行的项目列表 该列表指示项目的状态 假设屏幕保护程序的部分表示项目成功 则显示绿色 如果项目构建失败 则显示红色 可能屏幕保护程序必须分区到多个项目 您可以在任何合适的环
  • 将一个时间序列分割为另一个不规则时间序列

    我正在尝试用一个独特的不规则时间序列分割多个 xts 对象 split xts按天 分钟 秒等进行分割 使用断点需要相等长度的向量 当我尝试分割数据时 这会产生错误 dd lt c 2014 02 23 2014 03 12 2014 05
  • 如何正确地将 IsPressed 属性绑定到我的命令参数?

    我制作了一个自定义按钮来将命令绑定到 自定义 路由 IsPressedChanged事件 以便在按下按钮和释放按钮时执行该命令
  • Python - TypeError:“int64”类型的对象不可 JSON 序列化

    我有一个存储商店名称和每日销售额的数据框 我正在尝试使用下面的 Python 脚本将其插入到 Salesforce 但是 我收到以下错误 TypeError Object of type int64 is not JSON serializ
  • Windows 10 上的 VersionNT MSI 属性

    我发现当我更新引导程序的清单以支持 Windows 10 兼容性时 MSI 的 InstallUISequence 将正确设置 VersionNT 1000 但 InstallExecuteSequence 将设置 VersionNT 60
  • 将 UserID 从 ASP.Net 安全地传递到 Javascript

    在我当前正在开发的应用程序中 我们使用 ASP Net 表单身份验证来授予用户对站点的进一步访问权限 该网站面向移动用户 因此我们试图尽可能摆脱服务器的束缚 并利用 KnockoutJS 进行 Web 服务调用并加载数据 以便用户可以查看它
  • Azure 存储将 blob 移动到其他容器

    我正在寻找一种将 Azure 中的 blob 从一个容器移动到另一个容器的方法 我找到的唯一解决方案是使用 Azure 存储数据移动库 但这似乎适用于不同帐户 我想将同一帐户内的 blob 移动到另一个容器 我没用过Azure Storag
  • JUnit。并行运行。但所有测试方法都处理单例实例。怎么解决?

    所以 我有几个JUnit类 每个类都包含一个测试方法列表 每个方法都是相互独立的 没有直接的联系 但我们有间接联系 所有方法都处理一个单例对象 它是Selenium Web Driver实例 是的 我用1Web Driver我所有测试的实例
  • 如何优雅地结束 spring @Schedule 任务?

    我正在尝试让 Spring Boot 服务优雅地结束 它有一个方法 Scheduled注解 该服务使用 spring data 作为数据库 使用 spring cloud stream 作为 RabbitMQ 在计划的方法结束之前 数据库和
  • CSS,如何使水平菜单和子菜单居中?

    我正在学习 css 但我不知道菜单和子菜单居中 我正在使用 margin auto 或 margin left 和 margin right 为 auto 但它不起作用 任何帮助 将不胜感激 谢谢 HTML div ul li a href
  • 如何在JavaScript中不使用输入类型文件读取包含html的文本文件?

    我有一个文本文件assets包含一些要在特定组件的 div 中呈现的 html 的文件夹 有没有一种方法可以读取该文件并将内容分配给字符串变量 而无需用户与 ngOnInit 中的视图 具有输入文件类型 进行交互 我的发现如果我将 html