我正在学习Vue 2,我试图创建一个方法,用超链接替换字符串中的文本。
以下是文本:请将括号内的文字作为超链接(LINK 22)。
超链接应为http://www.myUrl22
我需要从括号(LINK 22)中提取22并将其附加到http://www.myUrl + 22
我使用https://regexr.com/帮助创建了一个捕获组,用于提取子字符串。
下面是将字符串传递到linkSearch方法的v-if条件。
只有当linkSearch返回时才会发生,否则它将打印没有链接的文本。
<div v-if="linkSearch(data.Text)">
<b-link
:href="linkSearch.href"
target="_blank"
:title="'View URL ' + linkSearch.title"
style="font-size: 1.5rem; text-decoration: underline"
>
linkSearch.href
</b-link>
</div>
<div v-else>
<b-card-body>
{{ data.Text }}
</b-card-body>
</div>
下面是应该返回整个URL作为超链接的方法
linkSearch(Text) {
let href = "";
if (Text.includes("LINK")) {
href = Text.replace(
/(\(LINK )(\d+)\)/g,
'$1 <a-href = "http://www.myUrl/$3">$2$3)</a>'
);
//was reading about indexOf so I gave it a shot..
//return this.Text.indexOf(n) > -1;
return { title: "LINK ", href: href };
} else {
return Text;
}
}
我得到未定义的URL
3条答案
按热度按时间cbjzeqam1#
您似乎使用了不正确的组编号。
您的模式仅包含,2组。
和/或
所以,我想,
$3
,将创建一个错误,或返回一个空值。如果只想捕获数字而不捕获文本 “LINK”,可以使用以下方法。
因此,对于替换字符串,您可以使用以下内容。
虽然,我不完全确定你所寻找的具体结果。
如果你需要在数字前加上文本,你可以使用下面的模式。
vof42yt12#
v-if
用于有条件地呈现元素,通常需要true/false值。换句话说,当应用于一个元素时,v-if意味着“如果为真,则呈现此元素”。如果为false,则不呈现”。使用带有v-if的方法返回一个对象或字符串实际上没有意义。v-if实际上应该只是linkSearch
方法中的第一个if语句现在,如果该语句为真,则将呈现
<b-link>
,否则将呈现具有v-else
的div。现在让我们继续获取实际链接。首先,
:href="linkSearch.href"
是不正确的。当您有一个输入参数时,您总是需要提供它。由于您已经将该方法定义为linkSearch(Text)
(Text是参数),href应该像这样赋值同样,对于标题:
这样做将导致
linkSearch
运行两次,每次为您调用的每个属性运行一次。这不是绝对可怕的,但它是低效的。将href和title分配给不同的数据变量,并在模板中使用它们将是一个更好的主意。不管怎样,最后要弄清楚实际的字符串替换。您将获得LINK编号作为第二个捕获组,因此这就是您在替换中需要使用的所有内容。为了让事情尽可能简单,我会这样做:
jogvjijk3#
谢谢你的帮助。我能够把你的两个建议都结合起来,把它变成一行字。
这是使用的方法。