Блог

Главная - Вопросы по программированию - Как определить, содержит ли текст ссылку herf

Как определить, содержит ли текст ссылку herf

#vue.js

Вопрос:

Мне нужно использовать vue для обнаружения всех ссылок в тексте, например, если у меня есть такой текст

текст : «привет, приятель, проверь эту ссылку»

я хочу, чтобы этот текст, когда он буферизуется в div, выглядел так

«привет, приятель, проверь эту ссылку»

Ответ №1:

Самый простой способ:

HTML

 <span v-html="formattedText"></span>

Скрипт

   data() {
    return {
      text: 'Some kind of text with url www.google.com'
    }
  },
  computed: {
    formattedText() { 
      return this.linkify(this.text)
    }
  },
  methods: {
     linkify(inputText) {
    const pattern1 = /(b(https?|ftp)://[-A-Z0-9 amp;@#/%?=~_|!:,.;]*[-A-Z0-9 amp;@#/%=~_|])/gim;
    let text = inputText.replace(pattern1, '<a href="$1" target="_blank">$1</a>');

    const pattern2 = /(^|[^/])(www.[S] (b|$))/gim;
    text = text.replace(pattern2, '$1<a href="http://$2" target="_blank">$2</a>');
    return text;
}

Это должно соответствовать вашим ожиданиям, вы также можете изменить 1 и 2 доллара на >$1|2</a> ссылку.

Комментарии:

1. это был пример , идея в том, что я хочу, чтобы, если кто-то добавит ссылку в текст, когда он ее отправит, эта ссылка просматривалась в href

2. Я скорректировал ответ, теперь он должен работать так, как вы хотите

3. почему я должен использовать вычисляемое свойство, когда входной текст статичен? или это для поля ввода?

Ответ №2:

Ну, есть множество библиотек, которые вы могли бы использовать для легкого достижения этой цели. Но я лично рекомендовал бы Anchorme.js из-за его очень маленького размера. Вы даже можете настроить способ обработки ссылки, когда в тексте есть #ids amp; @mentions .

 Vue.config.productionTip = false;
Vue.config.devtools = false;


new Vue({
  el: "#app",
  data: function() {
    return {
      text: `Library works with (http://www.google.com) or without (www.google.com) protocols in link. It works well on paths [www.github.io/something/something] and queries <wordpress.com/post.php?p=112> and even when query starts immediately after the TLDS "wordpress.com?p=112".`,
      convertedText: ""
    }
  },
  computed: {
    htmlText() {
      const converted = anchorme({
        input: this.text,
        // use some options
        options: {
          attributes: {
            target: "_blank",
            class: "detected"
          }
        },
        // and extensions
        extensions: [
          // an extension for hashtag search
          {
            test: /#(w|_) /gi,
            transform: string =>
              `<a href="https://a.b?s=${string.substr(1)}">${string}</a>`
          },
          // an extension for mentions
          {
            test: /@(w|_) /gi,
            transform: string =>
              `<a href="https://a.b/${string.substr(1)}">${string}</a>`
          }
        ]
      });
      return converted;
    }
  }
}); 
 .htmlText {
  background-color: #eeeeee;
  padding: 1em;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://raw.githack.com/alexcorvi/anchorme.js/gh-pages/dist/browser/anchorme.min.js"></script>

<div id="app">
  <textarea v-model="text" placeholder="enter text here" rows="3" cols="100">
  </textarea>
  <br/><br/>
  <div class="htmlText" v-html="htmlText"></div>
</div>
Метки: ,