Vue.js/JavaScript - 是否可以在文本中插入链接/锚点?

2024-04-09

假设我有一个段落,其中包含从某个数据库获取的一些文本:

<p> 
    {{ text }}
</p>

但是,此文本可能包含对我的应用程序中其他页面的一些引用:

Sample text [reference] sample text

所以我希望这些参考文献能够变成上述页面的链接:

<p>
    Sample text <a href="/path/to/reference"> reference </a> sample text
</p>

我尝试在脚本中使用替换函数,如下所示:

text.replace(/\[(.+)\]/,"<a href='/path/to/$1'>$1</a>");

但字符全部被转义,导致锚点 html 代码显示在页面上。

有没有办法阻止字符被转义,或者甚至有另一种方法可以将文本中间的[引用]转换为另一个页面的工作链接?


如果您不希望 HTML 被转义,请使用v-html https://v2.vuejs.org/v2/guide/syntax.html#Raw-HTML指示。

来自文档:

双胡子将数据解释为纯文本,而不是 HTML。在 为了输出真正的 HTML,您需要使用v-html指示:

Example:

var app = new Vue({
  el: "#app",
  data: function() {
    return {
      text: "See defect <a href='#'>#12345</a> for details"
    };
  }
});
<script src="https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection/dist/vue.min.js"></script>
<div id="app">
  <p>{{text}}</p>
  <p v-html="text"></p>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue.js/JavaScript - 是否可以在文本中插入链接/锚点? 的相关文章

  • 为什么我的反应路由器链接将我带到页面中间?

    我的网站上有很多链接 但只有一个可以执行此操作 它没有将我带到导航栏的顶部 而是转到内容的中间 知道为什么会这样吗 这是一个页面 其中有一个 map经历一些JSON 这是渲染div页面下方的文本元素 如果重要的话 这是一些可能相关的代码 路
  • Angular 4 过滤器搜索自定义管道

    所以我试图构建一个自定义管道来在 ngFor 循环中执行多个值的搜索过滤器 我花了几个小时寻找一个好的工作示例 其中大多数都是基于以前的版本 并且似乎不起作用 所以我正在构建管道并使用控制台为我提供值 但是 我似乎无法显示输入文本 以下是我
  • 使用 Jest 和 React JS TestUtils 测试表单

    我有一个带有 3 个单选按钮的表单 如下所示 假名
  • 如何让Gmail像加载进度条一样

    我想在页面的中心和顶部创建一个像 Gmail 一样的加载进度条 并适用于所有浏览器 这是基本代码
  • Mapbox GL 中的 MaxBounds 和自定义非对称填充

    我有一个 Mapbox GL JS 应用程序 在地图上显示一些小部件 为了确保地图上的任何内容都不会被它们隐藏 我使用以下命令添加了一些填充map setPadding 这是一个不对称的 在我的例子中左边比右边大 它按预期工作 例如fitB
  • jQuery输入文件点击方法和IE上拒绝访问

    我尝试仅使用一个按钮作为输入文件 它在 Firefox Chrome Safari 中工作正常 但在 IE 中不行 提交表单时我总是收到 访问被拒绝 的消息 代码 input file click 有真正的解决方法吗 我在谷歌上浪费了大约2
  • 检测 Google 验证码的挑战窗口何时关闭

    我正在使用谷歌隐形验证码 有没有办法检测挑战窗口何时关闭 我所说的挑战窗口是指您必须选择一些图像进行验证的窗口 目前 我在按钮上放置了一个旋转器 一旦单击按钮 就会呈现验证码挑战 无法向用户提示另一个质询窗口 我以编程方式调用渲染函数 gr
  • 访问 nuxt 配置文件中的存储

    我想添加通过 Nuxt 静态生成的动态路由 我定义了一个客户端 服务器端存储asyncData方法 我想将这个存储值 一个数组 映射到我的nuxt config js文件使其成为 动态 静态 路线图nuxt generate命令 但如何访问
  • karma/jasmine 控制台更详细的测试结果

    我使用 Karma 和 Jasmine 进行 javascript 单元测试 假设我有一个失败的测试 如下所示 expect objectA toEqual expectedObjectA 当失败时 我看到控制台上转储了两个对象 并显示一条
  • JavaScript中如何确保输入的值是数字而不是字符串?

    我创建了这个函数 function num var x prompt please enter your first number var y prompt please enter your second number if isNaN
  • 如何在 Web 服务器上设置 gzip 压缩?

    我有一个嵌入式网络服务器 总共有 2 兆空间 通常 您使用 gzip 文件对客户端有利 但这会节省我们在服务器上的空间 我读到你可以只 gzip js 文件并将其保存在服务器上 我在 IIS 上测试过 但没有任何运气 为了使这项工作成功 我
  • javascript 是否有等效的 __repr__ ?

    我最接近Python的东西repr这是 function User name password this name name this password password User prototype toString function r
  • 如何动态调整jqgrid到当前窗口大小?

    如何动态调整jqgrid到当前窗口大小 基于javascript jQuery 最好的例子在这里 TinyMCE 去 http www tinymce com tryit full php http www tinymce com tryi
  • 类中可以有生成器 getter 吗?

    我的意思是吸气剂是发电机 我相信这一切都是 ES6 也许像这样 class a get count let i 10 while i yield i let b new a for const i of b count console lo
  • 扩展 RegExp 以获取文件扩展名

    我知道 已经有很多基于 RegExp 的解决方案 但是我找不到适合我需求的解决方案 我有以下函数来获取 URL 的各个部分 但我还需要文件扩展名 var getPathParts function url var m url match w
  • 如何重复 ajax 请求,直到满足 RxJS Observable 的条件?

    我正在尝试重复请求 直到响应包含使用 RxJS 的数据 此时我想调用成功 或失败 处理程序 但我在使用 RxJS 时遇到了麻烦 这是我目前的方法 redux observable action observable mergeMap gt
  • PDF 在 Safari 中隐藏 Jquery Modal

    这是与我有关的事情this https stackoverflow com questions 24052681 pdf hide jquery modal in ie问题 在 IE 中 我在对话框中使用 iframe 解决了问题 所以它工
  • ng-include 和 ng-view 不同时加载

    下面是我的应用程序的结构 很简单 页眉和页脚是非常小的文件 而主页上的 ng view 要大得多 当我进入该页面时 我注意到了这一点 首先加载两个 ng include 然后 ng view 出现 页脚被推到底部 页脚闪烁大约 0 1 秒
  • 如何在运行脚本之前提交活动单元格中所做的更改? (Google 表格/Google Apps 脚本)

    我正在使用 Google Apps 脚本在 Google 表格中创建提交表单 该表单位于一页上 提交内容被移至第二个隐藏页面 当用户填写表单后 他们按下提交页面上的按钮以激活脚本 我遇到的问题是 当用户填写最后一个单元格然后单击按钮时 输入
  • 如何在 Jquery/Javascript 中绑定模糊和更改,但只触发一次函数?

    我试图在选择元素更改时触发函数 由于 Ipad 在 on change 方面遇到问题 我还想绑定到 blur 这在 Ipad 上工作得很好 但是我不希望两个事件都触发该函数两次 所以我需要某种挂钩来确保两个事件是否都触发change and

随机推荐

  • R:将矩阵重新排列为三列

    我在 R 中有一个矩阵 每个条目i j是分数 rownames 和 colnames 是 id 我只想要一个 3 列矩阵 而不是矩阵 i j score 现在我正在使用嵌套 for 循环 喜欢 for i in rownames g pri
  • 关于PE的魔数

    0x10b PE32 executable 0 107 ROM image 0x20b PE32 64 bit executable 是什么ROM image 有趣的问题 我涉足过操作 PE 文件 但从未注意到这一点 我认为它们的用途如下
  • 修改 tar 存档中嵌套的文件

    我正在尝试做一个grep然后一个sed搜索文件内的特定字符串 这些文件位于多个 tar 内 全部位于一个主 tar 存档内 现在 我通过以下方式修改文件 首先解压主 tar 存档 然后将里面的焦油全部提取出来 然后进行递归grep进而sed
  • JavaScript 正则表达式排除某些单词/短语?

    如何编写正则表达式模式来测试字符串是否包含多个具有以下结构的子字符串 cake xxx xxx 是哪里任何但不是 奶酪 或 牛奶 或 黄油 例如 I have a cake honey and cake egg 应该返回true but I
  • 防止 WPF 窗口最小化(主要是 Winkey + D)

    我有一个应该像 Windows Vista 小工具一样运行的窗口 它应该保留在桌面上 而不是出现在任务栏和 alt tab 菜单上 但最重要的是 不要最小化 这是它的标题 由于其样式设置为 None 因此它没有控制按钮 最小化 关闭等 但仍
  • Jenkins 向错误的提交 ID 发送通知

    我有几个 Jenkins 管道 所有管道都从 Bitbucket 导入共享库以实现某些实用方法 并且我想将构建状态通知发送到每个项目自己的 Bitbucket 存储库 我安装了Bitbucket 构建状态通知器 https plugins
  • 如何在Spring-MVC方法中绑定抽象类的子类?

    给定 Spring MVC 控制器中的 保存 方法 RequestMapping value save public void save ModelAttribute MY KEY final MyModel myModel 拥有位于myM
  • xdebug、PhpStorm 和 Laravel 3 / mod_rewrite 未命中断点

    我非常绝望并且没有想法 我已经为 Laravel 3 项目配置了 xdebug 和 PhpStorm 在 Mac OS X Apache 上本地运行该项目 因此 PhpStorm 和 Web 应用程序在同一台计算机上运行 配置虚拟主机 使
  • 从迭代器中删除 N 个值的 Pythonic 解决方案

    有没有一个Pythonic解决方案可以删除n来自迭代器的值 你可以通过丢弃来做到这一点n值如下 def drop it n for in xrange n it next 但在我看来 这并不像 Python 代码应有的那么优雅 我在这里缺少
  • 如何使用 cPanel 重新启动 NodeJS

    我需要知道从基于 cPanel 的服务器的根端使用什么来重新启动 NodeJS 应用程序 例如 如果进程由于某种原因现在终止 NodeJS 应用程序将不会启动 直到我手动启动它 如果服务器重新启动 我需要手动重新启动它 此外 这是服务器上多
  • Material-UI:更改 TextField 中的自动填充背景颜色

    目前 我有一个样式化的文本字段 当我开始在电子邮件字段中输入时 会出现自动填充选项 如果我选择自动填充选项之一 文本字段的背景将变为白色并带有黑色文本 我想改变这些风格 我试过这个 import withStyles from materi
  • IntelliJ 在整个文件中应用检查修复

    In IntelliJ I have the inspection that checks for variables that can be made final turned on so that IntelliJ will highl
  • MiniCssExtractPlugin 公共路径不起作用

    我在用MiniCssExtractPlugin在我的 React 应用程序中延迟加载 CSS 文件 我给了publicPath选项MiniCssExtractPlugin但它并没有采用这个选项值 而是采用output publicPath
  • 在 R 中运行时获取用户的整数输入

    我想在运行时获取 R 代码中整数变量的输入 我主要用 C 编写代码 想知道是否有类似的函数scanf在 R 中可以用来读取用户的输入 正如上面的评论所说 你可以使用readlines 然后转换为整数as integer 我还提供一个替代方案
  • Application.GetSaveAsFilename(InitialFileName:=Range("O26") 有时会出现一个空白对话框

    我有一个子程序将我的文档保存为二进制工作簿 来自堆栈溢出 我尝试从单元格中获取值用作文件名 通常它工作得很好 我不明白为什么有时不能 我在单元格 O26 中的数据始终是文本字符串 Dim fname As Variant Dim FileF
  • 如何在 Intellij Idea 上打开 Ant 项目(Nutch Source)?

    我想打开 Nutch 2 1 源文件 http www eu apache org dist nutch 2 1 http www eu apache org dist nutch 2 1 在 Intellij IDEA 以下是如何在 Ec
  • 使用 PySpark 在 HDFS 中保存并附加文件

    我在 PySpark 中有一个名为df 我已经注册了这个df as a temptable像下面这样 df registerTempTable mytempTable date datetime now strftime Y m d H M
  • 如何在R中生成对象的排列或组合?

    如何生成序列r对象来自n物体 我正在寻找一种方法来进行排列或组合 有 没有替换 具有不同和非不同的项目 又名多重集 这与十二倍的方式 http en wikipedia org wiki Twelvefold way 不同的 解决方案可以以
  • 使用 XPath 在 DOM 中搜索同一字符串的倍数

    我正在编写一个 Chrome 扩展 它将搜索 DOM 并突出显示页面上的所有电子邮件地址 我发现这是为了查找页面上的符号 但只有当有一个电子邮件地址时它才会正确返回 当找到多个地址时它会中断 found document evaluate
  • Vue.js/JavaScript - 是否可以在文本中插入链接/锚点?

    假设我有一个段落 其中包含从某个数据库获取的一些文本 p text p 但是 此文本可能包含对我的应用程序中其他页面的一些引用 Sample text reference sample text 所以我希望这些参考文献能够变成上述页面的链接