javascript - Vuejs Convert HTML to Plain text - Stack Overflow

admin管理员组

文章数量:1317906

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.

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.

• javascript
• html
• css
• vue.js

Share Improve this question Follow edited Jul 14, 2022 at 1:02 tony19 139k2323 gold badges277277 silver badges347347 bronze badges asked Oct 6, 2017 at 5:34 Abhishek PandeyAbhishek Pandey 13.6k88 gold badges4040 silver badges7272 bronze badges 6

• Did you tried this question answer - stackoverflow./questions/38428220/… – Jithin Raj P R Commented Oct 6, 2017 at 5:40
• You know VueJS is JavaScript, right? The JS solution should work. – Terry Commented Oct 6, 2017 at 5: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 Commented Oct 6, 2017 at 5: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 Commented Oct 6, 2017 at 5:51
• 1 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 ining 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 Commented Oct 6, 2017 at 6:45

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 4

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./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>

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./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',
  puted:{
    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./ajax/libs/vue/1.0.16/vue.js"></script>
<div id="vue-instance">
  <div>{{newHTML}}</div>
</div>
<div class="hide" id='temp'>123</div>

本文标签： javascriptVuejs Convert HTML to Plain textStack Overflow