Converting HTML to Plain Text in Vue.js

Is there a way 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 attempted to use v-html, but it parsed the HTML string like this:

 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

However, I want the result to be plain text, not HTML-formatted.

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 have seen solutions for achieving this with AngularJS and JavaScript, but not with Vuejs.

Note: I do not use jQuery in my project.

javascripthtmlcssvue.js

Answer №1

How can we utilize custom directives in Vue.js?

Vue.directive('myDirective', {
  bind(el, binding, vnode) {
    el.innerHTML = el.innerText;
  }
});

new Vue({
  el: "#myApp"
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="myApp">

  <ul v-myDirective>
    <li>Lorem ipsum dolor sit amet</li>
    <li>consectetur adipiscing elit</li>
    <li>sed do eiusmod tempor incididunt</li>
    <li>ut labore et dolore magna aliqua</li>
  </ul>
</div>

Answer №2

try to recreate the CSS layout

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>

Alternative approach using a 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ajax request unable to load Image Slider

I'm currently implementing an Image Slider from this source For the site structure, I've set up an index.html file to display all the pages, allowing navigation by changing the content within <div id="isi">. Here's a snippet of the in ...

javascripthtmlcssajaxslider

"Improvements required for the search and filter functionality in the JSON

My JSON function retrieves image data and displays it in panels. Here is an example of the code: $.getJSON('iproducts.json',function(products){ var output = ""; $.each(products.appleitems, function(i, product) { output += "<di ...

javascriptjqueryhtmljson

What is the best way to style MUI's Button component with a link to appear like a standard button?

I have a Button that allows users to download a file with a specific filename. Here is the code I used: <Button color='primary' href=`/apiproxy/objects/${id}/subobjects` LinkComponent={React.forwardRef((props, ref) => <Link {...pro ...

javascriptreactjsmaterial-ui

refreshing a react component when new props are received

Looking for a solution involving a React Native Component that requires an image URI as a prop? The prop is passed from another js file using the code snippet below: <SlideComponent imageUri={listOfAssets[counter].uri} /> The approach of passi ...

javascriptreact-nativecomponents

Examining - Assessing the Link (next/link)

I am currently working on writing unit tests to verify the functionality of my navigation links. Here is a snippet from my MainNavigation.js file: import Link from 'next/link'; const MainNavigation = () => { return ( <header> ...

javascriptreactjsjestjsnext.js

What is the best way to create an element that is clickable but transparent in appearance?

Is there a way to achieve an inset box shadow on elements like an iframe without blocking clicks on the element itself? The common strategy of overlaying a div over the iframe achieves the desired visual effect but unfortunately hinders interaction with th ...

htmlcss

Fixed Positioning Div to Stay at the Top while Scrolling

Currently, I have successfully implemented the functionality to stick the div to the top once it scrolls down by 320px. However, I am curious if there is an alternative approach to achieving this effect. Below is the code snippet I am using: jQuery(functi ...

javascriptjquerycsshtml

Why isn't the npm table populating the command line interface table?

I attempted to create a command line table using npm table, but encountered issues with it. Here is my code and an explanation. const {table} = require('table'); let data; let output; data = [['id','product','name&apos ...

javascriptnode.jsnpmterminal

Centering dilemma in the div

I have a main container with a width of 940 pixels. Inside the main container, there are two divs with a width of 250px each. My goal is to center align these boxes within the main container. However, the issue arises when the second div is added dynamic ...

jquerycsshtmlcenter

How can I divide a div by utilizing word wrap?

My CSS-styled div is pretty straightforward .text { text-transform: capitalize; color: #FFFFFF; background: #918a8a; opacity: 0.6; font-size: 2em; height: 80px; width: 200px; } It creates a grey box w ...

htmlcss

What is the best way to name a force-directed Graph using d3?

I'm struggling to label the nodes in my force-directed graph created with d3.js. Despite trying various solutions from StackOverflow and online tutorials, I believe my issues stem from a lack of fundamental understanding of JavaScript. https://i.sstat ...

javascriptd3.jsd3-force-directed

Is it possible to use rounded divs and buttons exclusively on iOS devices? Leveraging jQuery, AJAX,

Recently, I have been developing a client application that consumes an API and dynamically generates buttons. The project has been running smoothly on various platforms, with Chrome dev tools indicating no issues on any device. However, after testing it on ...

jqueryhtmlioscssapi

Setting a default value in a dynamic dropdown using AngularJS

I could really use some assistance with my issue as I am fairly new to working with AngularJS. My dilemma is related to setting the default value in a select option when there is only one item available due to it being a dynamic select option. Though there ...

javascriptangularjs

Tips for excluding a plugin on Vue CLI3 in the vue.config.js file

Currently, I am working on Vue cli3 and trying to exclude the moment.js plugin using webpack. Despite following the rule provided, I keep encountering an error in vue.confing.js even after multiple attempts to modify it. plugins: [ new webpack.IgnoreP ...

vue.jsvue-cli

"Encountering a 400 Bad Request error while trying to implement

I run a website that utilizes AJAX requests and history.pushState for navigation. The content requested includes Google's asynchronous AdSense code: <ins class="adsbygoogle" style="display:inline-block;width:468px;height:60px" data-ad-c ...

javascriptajaxadsense

What could be the reason why this XMLHttpRequest demo from Mozilla isn't functioning properly in Firefox 3?

Having some trouble with getting the sample code from Mozilla to work with a REST web service in Firefox 3.0.10. Surprisingly, it works fine in IE 8! Why is this not working? Does IE 8 support XMLHttpRequest? Most examples I've seen use ActiveX allo ...

javascriptajaxfirefoxrestxmlhttprequest

Error: posts.populate does not exist as a function

I am currently working on populating the author fields of my post (which are object ids) with their corresponding author objects stored in a separate collection. Here is the code snippet from my controller: exports.readPosts = async (req, res) => { t ...

javascriptnode.jsmongodbmongoose

Tips on using Ajax to post in HTML

Here is the code I have been working on: <script type="text/javascript"> var xmlDoc; var xmlhttp; function loadRates() { xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = readRates; xmlhttp.open("GE ...

javascriptjqueryhtmlajax

Viewing the scroll overflow element without needing to scroll it into view

I am encountering an issue with a child element styled using overflow-y: auto. Inside this element, there is a list of other objects. Occasionally, I need to scroll this list to a specific position and have been utilizing item.scrollIntoView() for this pur ...

javascriptjqueryscroll

Scaling images proportionally using CSS (without the need for JavaScript, ideally!)

Is there a way to proportionally scale images using CSS? I'm looking for a solution where the image adjusts to the full container size, becoming larger or smaller based on the container dimensions. Additionally, I want the image to be displayed in th ...

htmlimagecss