Hey there folks :) I am trying to set up a search engine with elasticsearch/node.js, express and vue.js. I would like the search results to be clickable links, but they are only returning non-clickable html. I have tried adding normal html A- tags to the .json file, but on the front end this renders as a non clickable html text and not as a clickable link. Any suggestions would be really appreciated
this is what I have tried, just as a test:
Visit our HTML tutorial
I have had a look on google for possible solutions but all I could find were references to the normal html a-tag and that both j.son and vue.js can take those?
If I correctly get the issue, At FE your link get rendered as sting which is Google . You need to use v-html in this case to tell element to render the passed value as html not as string
//Suppose you have this vue data prop
let url = Google
Now In you html part Just use v-html to render
<div class="foo">
<template v-html="url" />
</div>
Related
I'm stuck with trying to figure out how to display html tags inside of a mongodb table. Everytime I view the data through the browser, it shows the text of the html. Example:
I have this in a mongodb database table:
Test
It should display as this when viewed on a webpage: Test
But instead, it displays Test
Your Issue
I haven't used EJS before but I'm assuming its an issue with how you're inserting the HTML strings from the database into your EJS templates.
In most templating engines, simply inserting a string containing HTML markup will result in the engine escaping the HTML instead of rendering it.
EXAMPLE
INPUT > <div class='box'> <p class='item'>Hello World</p></div>
OUTPUT > <div class='box'> <p class='item'>Hello World</p></div>
This is normal and there are many reasons for it, one of which is security.
Solution
If it is, in fact, an issue with EJS escaping the HTML, you must instruct EJS to not escape it. I've never used EJS before but a quick google search for EJS escape html brought up this result How to escape HTML in node.js EJS view?
For future reference
While EJS will escape your HTML by default stack overflow does not. When you inserted <strong> in your question, stack overflow rendered it as HTML.
To get StackOverflow (and most other markdown readers) to render any HTML markup literally like I've done above, wrap the HTML in graves `.
Also, try to provide more information in your questions. The more information, the easier it is to deduce the likely source of the problem.
I am hitting an API endpoint, which returns the HTML for a blog post as a string. So lots of <p> tags, <img>, <span>, and <div> tags in the response string, with a non-inconsequential amount of element nesting.
in a react app, I want to parse this HTML string, and replace some of the HTML elements (images, paragraphs) with custom react components ( ie wrap an image tag in a lazy-load react component).
what is a good / clean way to do this? trying to parse HTML with regex seems to be an antipattern, and I'm not sure what other possible options there are. parse the string into traditional dom nodes, and then iterate through the collection?
currently I just render the html-as-string inside a react component using dangerouslySetInnerHTML.
What is a reliable, non-regex way to wrap html-as-a-string entities with React components, while maintaining the original order of the nodes (ie in a blog post)?
Take a look at this module and see if it can help you: (https://www.npmjs.com/package/html-to-react). Basically, you can:
Convert html string to React component nodes
Replace the Children of an Element
I have gotten the hang of using the html agility pack to find specific nodes using their attributes and xpaths. The problem is, I've been doing this manually for each of my projects (opening the website html and scanning for the nodes that have the text i need). Is there a way to select a single node by its inner text? This would make it easier to write an update script for websites whose content scheme is the same, but attribute tags change values over time. Thanks in advance!
Would be better if you have provided sample HTML, but since you haven't, let's assume we have HTML containing this markup :
<body>
<div class="foo">bar</div>
</body>
You can select the <div> by it's attribute using HtmlAgilityPack's SelectSingleNode() and XPath like so :
myHtmlDocument.DocumentNode.SelectSingleNode("//div[#class='foo']");
or you can select the same by the inner text like so :
myHtmlDocument.DocumentNode.SelectSingleNode("//div[.='bar']");
Hope this help.
I am using your dc js in node js for rendering dc chart via server but i am facing many problems.
First I found all result of the svg in variable, but i want to know how to render chart in web browser.
When i write that SVG tags to file like "index.html" trying to run that file to browser, Chart is displayed but filter is not wroking
How we can use dc.js with node.js in browser?
I have tried many ways to get result, but i am not successed. If you have any tutorial or any guid Please let me know
I have not experimented with using dc.js on the server side with node, but you should be able to write the svg tag into an html document.
For example, if you browse the DOM of a live site like http://dc-js.github.io/dc.js/ in the DOM, using the Elements tab of Chrome's Developer Tools, you'll see something like this:
<div class="row">
<div id="yearly-bubble-chart" class="dc-chart">
<strong>Yearly Performance</strong> (radius: fluctuation/index ratio, color: gain/loss)
<a class="reset" href="javascript:yearlyBubbleChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
<div class="clearfix"></div>
<svg width="990" height="250"><g>
...
Note: I don't think you can get the interactive features of dc.js using it this way.
I would like to know the possibility to develop custom html tags or custom html attributes to node.js , rather in jade, html or another html template enginer. I was looking at PhantomJS and I don't realize any example that accomplish it, either Cheerio as well. My goal is to make some components to easily usage in any kind of popular html engines. Any direction will be very helpful. Thanks!
Node.js is just a webserver, You need something to parse the custom tags, so its either the template engine that will convert it to valid html, or client side with JavaScript (aka AngularJS directives)
You can write your own filter similar to the example
body
:markdown
Woah! jade _and_ markdown, very **cool**
we can even link to [stuff](http://google.com)
That would give you
<body>
<p>Woah! jade <em>and</em> markdown, very <strong>cool</strong> we can even
link to stuff
</p>
</body>