如何使用方法制作vueJS超链接

cl25kdpy  于 2023-06-24  发布在  Vue.js
关注(0)|答案(3)|浏览(143)

我正在学习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

cbjzeqam

cbjzeqam1#

您似乎使用了不正确的组编号。

$1 <a-href = "http://www.myUrl/$3">$2$3)</a>

您的模式仅包含,2组。

(\(LINK )

和/或

(\d+)

所以,我想,$3,将创建一个错误,或返回一个空值。
如果只想捕获数字而不捕获文本 “LINK”,可以使用以下方法。

/\(LINK (\d+)\)/g
  • "...超链接应为http://www.myUrl22..."*

因此,对于替换字符串,您可以使用以下内容。
虽然,我不完全确定你所寻找的具体结果。

<a-href = "http://www.myUrl$1">(LINK $1)</a>

如果你需要在数字前加上文本,你可以使用下面的模式。

/\((.+) (\d+)\)/g
<a-href = "http://www.myUrl$1">($1 $2)</a>
vof42yt1

vof42yt12#

v-if用于有条件地呈现元素,通常需要true/false值。换句话说,当应用于一个元素时,v-if意味着“如果为真,则呈现此元素”。如果为false,则不呈现”。使用带有v-if的方法返回一个对象或字符串实际上没有意义。v-if实际上应该只是linkSearch方法中的第一个if语句

<div v-if="data.Text.includes('LINK')">

现在,如果该语句为真,则将呈现<b-link>,否则将呈现具有v-else的div。
现在让我们继续获取实际链接。首先,:href="linkSearch.href"是不正确的。当您有一个输入参数时,您总是需要提供它。由于您已经将该方法定义为linkSearch(Text)(Text是参数),href应该像这样赋值

:href="linkSearch(data.Text).href"

同样,对于标题:

:title="'View URL ' + linkSearch(data.Text).title"

这样做将导致linkSearch运行两次,每次为您调用的每个属性运行一次。这不是绝对可怕的,但它是低效的。将href和title分配给不同的数据变量,并在模板中使用它们将是一个更好的主意。
不管怎样,最后要弄清楚实际的字符串替换。您将获得LINK编号作为第二个捕获组,因此这就是您在替换中需要使用的所有内容。为了让事情尽可能简单,我会这样做:

linkSearch(Text) {
  let num = Text.replace(/(\(LINK )(\d+)\)/g, '$2')
  return { title: 'LINK ', href: 'http://www.myUrl/' + num }
}
jogvjijk

jogvjijk3#

谢谢你的帮助。我能够把你的两个建议都结合起来,把它变成一行字。

<div v-html="linkSearch(data.Text)"></div>

这是使用的方法。

linkSearch(Text) {
  return Text.replace(
    /(\(LINK)(\d+)\)/g,
    '<a  target="_blank" title="https://myurl.com/$2" href = "https://myurl.com/$2">$1 $2)</a> '
  );
},

相关问题