How to display javascript/html code in react.js render.
I have tried like this
var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong </p>';
return (
<div>
<div dangerouslySetInnerHTML={{__html: thisIsMyCopy}}>
</div>
</div>
)
This is html code.. but i also want to display javascript code on my screen... how i can do that..
Can you guide me.. how to proceed with it
Its already in a stringed version, just need to include the variable inside curly braces. dangerouslySetInnerHTML is for when you want to turn a html string into actual html.
var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong </p>';
return (
<div>
{thisIsMyCopy}
</div>
)
if you want a string version of a function just take whatever function and add a string to it like so:
function functionString() { console.log('stringed function") }
var functionAsString = '' + functionString
return (
<div>
{functionAsString}
</div>
)
Here is a working pen demonstrating this http://codepen.io/finalfreq/pen/JRqEWW
If you want to display the "code" in html, you can use
<code>something</code>
tag and it will display your code onto the screen.
Related
I have a very simple html code here. I want to store the whole div test_area and then create it when I need it. For now, let's assume that I want to duplicate it and put the clone below the existing element, how can I do that? Here's what I tried to do which didn't work (specifically the innerHtml line):
<body>
<div class="test_area" id="test_area">
<h1>
This is a test
</h1>
</div>
</body>
<script>
let current_element = document.getElementById('test_area')
let clone = document.createElement('div')
clone.innerHTML = current_element
document.body.appendChild(clone)
</script>
In the end I want the final html version to look like this:
This is a test
This is a test
Depends what you want to do with the element. You can store it in a variable and then render somewhere or you could store it to localstore or send to server or what ever you like. Here is a simple example:
<div class="test_area" id="test_area">
<h1>
This is a test
</h1>
</div>
<div id="clonearea"></div>
const current_element = document.getElementById('test_area');
const clonearea = document.getElementById('clonearea');
const clone = current_element.cloneNode(true);
clonearea.appendChild(clone);
You can read more about cloning here: https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode
And here is a codepen example: https://codepen.io/shnigi/pen/LYRQGOW
You can simply convert the old object in a JSON, and then parsing it and save it to a var.
let myObject = JSON.parse( JSON.stringify( myOldObject ) );
this way you can access myObject and display it whenever you want.
Take a look to this question :
What is the most efficient way to deep clone an object in JavaScript?
This is not cloning, but a way to create and append in one line:
document.getElementById("test_area").appendChild(Object.assign(document.createElement("h1"), {textContent: "This is a test"}))
<body>
<div class="test_area" id="test_area">
<h1>
This is a test
</h1>
</div>
</body>
To actually clone, use cloneNode
https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode
let p = document.getElementById("test_area").children[0]
let p_prime = p.cloneNode(true)
document.getElementById("test_area").appendChild(p_prime)
<body>
<div class="test_area" id="test_area">
<h1>
This is a test
</h1>
</div>
</body>
Apparently the only thing i should have done to fix this problem is use the variable's innerHTML and append it on the body, like this. I had totally forgotten that current element is an object, not the html code itself.
const current_element = document.getElementById('test_area');
document.body.appendChild(current_element.innerHTML)
In my Polymer page I get a text from db in a variable and the text contains HTML tags. How can I change this text to HTML formated? The text I get is something like following:
<h1>Header</h1>
<p>More text......</p>
Read more
I display it in my page like the following, where item.content has the above text:
<div>
<p>${item.content}</p>
</div>
You can use unsafeHTML function from lit-html lib. See API reference here.
Example:
import { unsafeHTML } from 'lit-html/directives/unsafe-html.js'
...
_render ({ yourHtmlString }) {
return html`
${unsafeHTML(yourHtmlString)}
`
}
Live demo on stackblitz.
I seem to be having problems converting some php Regex code into Javascript Regex code. The php version works flawlessly, and it was one of our fellow users, jim tollan, that wrote the php code that inspired me to write it in javascript because I need it done on the client-side. The code pulls out content between html tags based on the specified tag attribute (id, class, etc..) and the value of that attribute.
Here is the original code by jim tollan:
<?php
function get_tag( $attr, $value, $xml ) {
$attr = preg_quote($attr);
$value = preg_quote($value);
$tag_regex = '/<div[^>]*'.$attr.'="'.$value.'">(.*?)<\\/div>/si';
preg_match($tag_regex,
$xml,
$matches);
return $matches[1];
}
$yourentirehtml = file_get_contents("test.html");
$extract = get_tag('id', 'content', $yourentirehtml);
echo $extract;
?>
And here is the javascript code I've written and embedded in html file:
<script type="text/javascript">
function get_tag(attr, value, xml) {
var attr = preg_quote(attr);
var value = preg_quote(value);
var tag_regex = new RegExp('/<input[^>]*'+attr+'="'+value+'">(.*?)<\\/label>/si');
// preg_match
xml.match(tag_regex);
}
var yourentirehtml = file_get_contents("test.html");
var extract = get_tag('id', 'custom-63', yourentirehtml);
alert(extract);
</script>
I used the functions defined at phpjs.org to define both preg_quote and file_get_contents
Here is the test.html file that I'm using:
<html>
<head>
</head>
<body>
<div id="content">
<!--content-->
<p>some content</p>
<!--content-->
</div>
<label>
<input type="radio" name="testingMethod" id="custom-63">
" Radio Button Text "
</label>
</body>
</html>
When I run the php file, it works, but when I run the javascript code, the alert box shows
undefined
I want to know if my implementation of the expression in var tag_regex is correct, and if it is, is there anything in my code that is preventing me from the yielding the results I want?
I solved this problem by scrapping the idea of using regex, and I decided to go with using the DOM. It can be done rather simply by doing this:
<script type="text/javascript">
var x=document.getElementsByTagName("label")[];
// put the index of the element within the square brackets if you have more than one with the same name
// 0 is the first index
// you can also use getElementsById or getElementsByTagName
var result = x.innerText;
// you can also do x.cell[].innerText if you have more than one item within the element you found above
// 0 is the first index, and any index number should be put within the square brackets
</script>
I'm using markdown editor in my app.
$(document).ready(function () {
var converter = Markdown.getSanitizingConverter();
var editor = new Markdown.Editor(converter);
editor.run();
});
<div class="wmd-panel">
<div id="wmd-button-bar"></div>
<textarea class="wmd-input" id="wmd-input" rows="7" cols="30"></textarea>
</div>
<div id="wmd-preview" class="wmd-panel wmd-preview" name="Content"></div>
Initially, the textarea field is empty. After I enter some text, everything works as expected:
Firebug shows such html structure:
Now I need to get entered pure markdown text: **where** is it ?. I need it because I think it should be stored in the database (and later retrieved from database and converted to html when showed to the user). I have no idea how can it be reached. How can I get it ?
They've have some Docs which might be helpful to you.
The fancy way would probably be to catch the preConversion event in the event-chain:
converter.hooks.chain('preConversion', function(markdown) {
// Do something wonderful with you markdown variable, and then return it.
return markdown;
});
The less fancy way, but working as expected would be to just retrieve the value of the value parameter of the textarea.
var textarea = document.getElemetById('wmd-input');
var markdown = textarea.value;
Background:
I have string of html with about 10 image tags that passes through some JavaScript as a string at runtime before being injected into a containing element. The data-thumb tag of each image is slightly incorrect and needs to be altered before making it into the DOM. Here is an example:
<img src="foo_lg_db.jpg" data-large="foo_lg_db.jpg" />
<img src="bar_lg_db.jpg" data-large="bar_lg_db.jpg" />
<img src="fizz_lg_db.jpg" data-large="fizz_lg_db.jpg" />
Needs to become:
<img src="foo_tn_db.jpg" data-large="foo_lg_db.jpg" />
<img src="bar_tn_db.jpg" data-large="bar_lg_db.jpg" />
<img src="fizz_tn_db.jpg" data-large="fizz_lg_db.jpg" />
Question:
In JavaScript (jQuery is OK), how do I achieve this search and replace?
THE ANSWER:
Thanks to Mark's answer I learned that it is possible to instantiate a jQuery object before it hits the DOM so, rather than using regex, I did something like this:
var stringHtml = "<img . . .";
var div = $("<div>").html(stringHtml );
$.each(div.find('img[src]'), function () {
$(this).attr('src', $(this).attr('src').replace('_lg', ''));
});
return div.html();
$('img[data-thumb]').each(function() {
$(this).attr('data-thumb', $(this).attr('data-thumb').replace('_lg_','_tn_'));
});
Something like that in jQuery.
Sounds like a problem you should be fixing server-side if possible though.
If you give jQuery an HTML element like $('<div>') it will essentially create the HTML element for you and then you can manipulate it before inserting it into your DOM. I don't know if it will handle multiple elements, but you can create a container first (like above) and then set the content like so
$('<div>').html(yourHtml).find('img[data-thumb'])./* code above */