Set event Listener on every Word in a long text

Question

I want to make a text clickable and by this I mean every word in it. Now I know that you can wrap every Word with a <span> tag. That works well for sentences and paragraphs, but I want to be able use long texts (Articles to books) and I guess that this mechanism wont work for this.

So in a way I want to add the specific eventlistener, when I click on it and not beforehand, because wrapping each word in a whole book with a <span> would just cause to much overhead.

So I was wondering if there is something like a package that can do that for me?

The other way I could think of, is to put the text and event Listeners into an Object like this:

[{"word: 'Hello'", event:EventListenerFunction},{"word":'World!', event: EventListerenerFunction},...].

This way I can compute the whole thing on the server and not on the client and would create a lot more information needed. It also has advantages for other stuff I want to do with the texts too.

Now the problem with this approach is the displaying. Its easy to display the text in vue.js like so: {{ textObject.text }} (if the object is structured in the right way of course. Otherwise you need to filter the words beforehand). But How can I display the words without losing the information in the Object and make the event listeners work?

My third theoretical Idea was to give the parent html-tag an eventlistener that somehow gets the clicked word as argument. That would work with the wrapping span around the words approach. But without it?

Do you have any other ideas?

Answer 1

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>

Answer 2

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>