Vuejs Convert HTML to Plain text

Question

I want to convert HTML to plain text using vuejs.

<ol>
    <li>The quick brown fox jumps over the lazy dog</li>
    <li>The quick brown fox jumps over the lazy dog</li>
    <li>The quick brown fox jumps over the lazy dog</li>
    <li>The quick brown fox jumps over the lazy dog</li>
</ol>

I used v-html but this parse HTML sting to HTML like below

 1. The quick brown fox jumps over the lazy dog
 2. The quick brown fox jumps over the lazy dog 
 3. The quick brown fox jumps over the lazy dog
 4. The quick brown fox jumps over the lazy dog

But I want result to be like this.

The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog

I could do this with angularjs or javascript but I couldn't found anything with vuejs

Note: I'm not using jquery in my project.

Did you tried this question answer - https://stackoverflow.com/questions/38428220/convert-string-to-dom-in-vuejs — Jithin Raj P R, Oct 06 '17 at 05:40
You know VueJS is JavaScript, right? The JS solution should work. — Terry, Oct 06 '17 at 05:43
@Terry I know, I'm looking for stranded solution by vue e.g. service or filter, and considering `js` solutions as last option. — Abhishek Pandey, Oct 06 '17 at 05:46
@weBer That question is about converting `string` to `dom`, and I want to convert `html` to `plain text`, not DOM at all, thanks for suggestion. — Abhishek Pandey, Oct 06 '17 at 05:51
I don't see why there **must** be a VueJS-ish way to do this. What you are describing is simply pulling the `textContent` of a virtually created DOM node based on the incoming HTML. If native JS can do this, there is no reason why it has to be included as a helper functionality in VueJS. Based on your reasoning, then VueJS should include it's own iterating functions, its own array mapping methods, its own prototype for every type object, and etc. What you can do though, is to create a global helper method that does that for you. — Terry, Oct 06 '17 at 06:45

score 3 · Answer 1 · edited Jan 30 '19 at 10:59

what about custom directives

Vue.directive('plaintext', {
  bind(el, binding, vnode) {
    el.innerHTML = el.innerText;
    //el.innerHTML = el.innerHTML.replace(/<[^>]+>/gm, '');
  }
});

new Vue({
  el: "#app"
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="app">

  <ol v-plaintext>
    <li>The quick brown fox jumps over the lazy dog</li>
    <li>The quick brown fox jumps over the lazy dog</li>
    <li>The quick brown fox jumps over the lazy dog</li>
    <li>The quick brown fox jumps over the lazy dog</li>
  </ol>
</div>

Niklesh Raut · Answer 2 · 2017-10-06T06:44:28.043

try to convert from css

var vm = new Vue({
  el: '#vue-instance',
  data: {
    html: `<ol>
    <li>The quick brown fox jumps over the lazy dog</li>
    <li>The quick brown fox jumps over the lazy dog</li>
    <li>The quick brown fox jumps over the lazy dog</li>
    <li>The quick brown fox jumps over the lazy dog</li>
</ol>` 
  }
});

ol{
  list-style: none;
}
ol li{
  display: inline;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<div id="vue-instance">
  <div v-html="html"></div>
</div>

Another way using hidden div

var vm = new Vue({
  el: '#vue-instance',
  computed:{
    newHTML: function(){
      document.querySelector("#temp").innerHTML = this.html;
      var textContent = document.querySelector("#temp").textContent;
      document.querySelector("#temp").innerHTML = "";
      return textContent;
    }
  },
  data: {
    html: `<ol>
    <li>The quick brown fox jumps over the lazy dog</li>
    <li>The quick brown fox jumps over the lazy dog</li>
    <li>The quick brown fox jumps over the lazy dog</li>
    <li>The quick brown fox jumps over the lazy dog</li>
</ol>`
  }
});

.hide{
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<div id="vue-instance">
  <div>{{newHTML}}</div>
</div>
<div class="hide" id='temp'>123</div>

I appreciate this answer, but `ol` is just for example, HTML can contain any tag `div`, `pre` etc. — Abhishek Pandey, Oct 06 '17 at 05:43
@AbhishekPandey : can you make live demo/fiddle with exact problem ? — Niklesh Raut, Oct 06 '17 at 05:57
Check this [fiddle](https://jsfiddle.net/8w9ho1v8/1/), I hope it's easy to understand now. — Abhishek Pandey, Oct 06 '17 at 06:10
@AbhishekPandey : Ahh I thought you can easily convert this : https://jsfiddle.net/8w9ho1v8/3/ — Niklesh Raut, Oct 06 '17 at 06:46

Vuejs Convert HTML to Plain text

2 Answers2