[Vuejs]-Set event Listener on every Word in a long text

by

2👍

✅

With spans:

var page = 'Lorem ipsum dolor sit amet, cu eum eros vitae persequeris, laudem possit nam ex. Labore eloquentiam per an. Sit ex omnesque interpretaris, habeo tantas eos ad, ea eos ludus inciderint. Facete tritani pro ei, vim evertitur liberavisse ex. Ridens indoctum duo cu, est utamur aliquando expetendis ne. Cum nusquam definiebas ex, id esse neglegentur cum, eu libris bonorum volumus vis. Ius et quis omnis graeco, no his nullam perpetua dissentiet. No vix possim scripserit consequuntur, te mnesarchum philosophia sed. Ne mea putent iudicabit, in eam ipsum viris dicunt. Eum amet accommodare ex, sint malis adversarium at qui.'

new Vue({
  el: '#app',
  data: {
    page: ''
  },
  computed: {
    pageContent () {
      return this.page.replace(/\b(\w+?)\b/g, '<span>$1</span>')
    }
  },
  methods: {
    doSomething (e) {
      if (e.target.nodeName === 'SPAN')
        console.log(e.target.textContent)
    }
  },
  created () {
    // load external data
    this.page = page
  }
})
<div id="app">
  <p @click="doSomething" v-html="pageContent"></p>
</div>

<script src="https://unpkg.com/vue@2.5.9/dist/vue.min.js"></script>

Without spans:

var book = 'Lorem ipsum dolor sit amet, cu eum eros vitae persequeris, laudem possit nam ex. Labore eloquentiam per an. Sit ex omnesque interpretaris, habeo tantas eos ad, ea eos ludus inciderint. Facete tritani pro ei, vim evertitur liberavisse ex. Ridens indoctum duo cu, est utamur aliquando expetendis ne. Cum nusquam definiebas ex, id esse neglegentur cum, eu libris bonorum volumus vis. Ius et quis omnis graeco, no his nullam perpetua dissentiet. No vix possim scripserit consequuntur, te mnesarchum philosophia sed. Ne mea putent iudicabit, in eam ipsum viris dicunt. Eum amet accommodare ex, sint malis adversarium at qui.'

new Vue({
  el: '#app',
  data: {
    book: ''
  },
  methods: {
    doSomething (e) {
      var content = e.target.textContent
      var pos = window.getSelection().anchorOffset
      content = content
        .substring(0, content.indexOf(' ', pos))
        .trim()
      content = content
        .substr(content.lastIndexOf(' ') + 1)
        .replace(/[.,:;!?()+-]/g, '')
        
      console.log(content)
    }
  },
  created () {
    // load external data
    this.book = book
  }
})
<div id="app">
  <p @click="doSomething" v-html="book"></p>
</div>

<script src="https://unpkg.com/vue@2.5.9/dist/vue.min.js"></script>
👤user6748331

1👍

You can use window.getSelection() to get your position in the text, then find the word characters around it.

One corner case: if you have formatting tags (like the bold in my example) that break a word, you will get the part of the word you clicked on, but not the whole word.

var page = `Lorem ipsum dolor sit amet, cu eum eros vitae persequeris, laudem possit nam ex.
Labore eloquentiam per an.
Sit ex omnesque interpretaris, habeo tantas eos ad, ea eos ludus inciderint.
<i>Facete tritani pro ei</i>, vim evertitur liberavisse ex.
Ridens indoctum duo cu, est utamur aliquando expetendis ne. <b>Cum nusquam defin</b>iebas ex, id esse neglegentur cum, eu libris bonorum volumus vis. Ius et quis omnis graeco, no his nullam perpetua dissentiet. No vix possim scripserit consequuntur, te mnesarchum philosophia sed. Ne mea putent iudicabit, in eam ipsum viris dicunt. Eum amet accommodare ex, sint malis adversarium at qui.`

new Vue({
  el: '#app',
  data: {
    page
  },
  methods: {
    doSomething (e) {
      const sel = window.getSelection();
      const text = sel.anchorNode.textContent;
      const lmatch = text.substr(0, sel.anchorOffset).match(/[\s\S]*\s/);
      const offset = lmatch ? lmatch[0].length : 0;
      const match = text.substr(offset).match(/\w+/);
      
      console.log(match && match[0]);
    }
  }
})
<div id="app">
  <p @click="doSomething" v-html="page"></p>
</div>

<script src="https://unpkg.com/vue@2.5.9/dist/vue.min.js"></script>
👤Roy J

Leave a comment