i have a textarea with contents of html file. The textarea content includes my entire html page content, includes the doctype, head, html etc.
now, i want to save the textarea into a dom vairable via $.parseHTML:
var txt = $.parseHTML($("textarea").val(), null, true);
next, i change my txt variable and dom elements with commands like:
$(txt).find("h1").text("demo");
$(txt).find("h2").text("demo h2");
after changing the txt dom i want to put the txt as string back to the textarea, but nothing seems to work. i already tried:
$("textarea").val($(txt).html());
or
$("textarea").val(txt.html());
i also tried looping the dom:
$.each($(txt).get(),function(){
v = $("textarea").val();
$("textarea").val(v+$(this)[0].outerHTML);
});
but that didn't gave the expected results as items outside the body tag haven't translated back.
any advise shall be greatly appriciated
var txt = $('#textarea').val();
var html = $('<div class="wrap">'+txt+'</div>');
$('h1', html).text('is H1');
$('h2', html).text('is H2');
$('#textarea').val(html.html());`
Related
In the following code, the CreateTextNode function does not use the HTML tags contained in the text variable. Instead, it displays the raw HTML text in the result.
var i,text;
for(i=0;i<p.length;i++){
text+=p[i].name+"<br>"+p[i].id+"<br>"+p[i].image;
//text contain embedded HTML tag.
}
var para=document.createElement("p");
var node=document.createTextNode(text);
para.appendChild(node);
var element=document.getElementById("one");
element.appendChild(para);
If you want the text treated as HTML and parsed, use the innerHTML property, not a text node:
var para=document.createElement("p");
para.innerHTML = text;
Alternately, you could use insertAdjacentHTML:
var para=document.createElement("p");
para.insertAdjacentHTML("beforeend", text);
...but setting innerHTML is probably simpler in this case, since you just created the element and you know it's empty.
Currently I use $('div#edit').froalaEditor('html.get') to retrieve the html data inside editor, but it sucks when it comes to process / store the text data in my backend because of all the p tags and &npsb; symbols in raw html string.
To be honest they do not even pass to the database without losing parts of the data. Is there a way or an api to directly extract the text data as a string with proper symbols like "\n\t" from the froala editor?
If you dont like p tags you should use the enter option:
$('div#froala-editor-br').froalaEditor({
enter: $.FroalaEditor.ENTER_BR
});
If you really would like to remove all tags you could use jQuery text method
jQuery($('div#edit').froalaEditor('html.get')).text()
Or you could use HTML options
var html = $('div#edit').froalaEditor('html.get') ;
var div = document.createElement("div");
div.innerHTML = html;
alert(div.innerText);
There is http://textversionjs.com/ library which can be used to convert HTML to plain text. It also keeps new lines.
<script src="textversion.js"></script>
<script>
var html = $('div#edit').froalaEditor('html.get');
var text = createTextVersion(html);
</script>
Honestly, the easiest way to do this is
var body = $('#body').froalaEditor('html.get');
alert($(body).text());
You can use stringify() method in JSON to convert the HTML form to a text form.
<script>
var html = $('div#edit').froalaEditor('html.get');
var text = JSON.stringify(html)
</script>
And you can store them in any backend and use them later.
Hello Experts I need help
I'm using dojo Dijit Editor "rich text editor" field in my widget, on page load I fetch HTML text from database and I set the rich text editor with the HTML normally, Then user can edit the displayed text and on page close I have to set the field in database with the source HTML of the edited text by user
the problem is when I do the following "myDB_txt=myEditor.getValue();" getValue() doesn't return the complete HTML code it removes HTML tag and header tag and body tag which causes me troubles.
Simply use myEditorWidget.get("Value") where myEditorWidget refer to your dijit/Editor indtance
To wrap this result you can define a function that return result wraped by html tags
wrapResult(myEditor.get("value")));
function wrapResult(html) {
return "<html> <head></head> <body>"+html+"</body></html>";
}
Here is a Sample with wraped result Fiddle .
Otherwise If you want to get the whole HTML enclosing the content dijit ,
you will get access to it's Iframe ( that has the id="editor_iframe")
and then get get the html document of this last like bellow (here you should import dojo/query package)
query("#editor_iframe")[0].contentDocument.documentElement.outerHTML
Here is another Fiddle .
You could try the following to retrieve the value from your dijit/Editor instance.
var content = myEditor.attr("value");
var openTags = '<html><head></head><body>';
var closeTags = '</body></html>';
var html = openTags + content + closeTags; // use this
or
var htmlWrapper = function(content){
return '<html><head></head><body>' + content + '</body></html>';
};
var html = htmlWrapper(myEditor.attr("value"));
I am attempting to write my own piece of Javascript that converts html to ascii code (for learning purposes) so that the browser will render the code as you would see it in a text editor.
After looking around on Stack I have gotten as far as below. I am trying to turn an html element into a string; at this stage I am just trying to .replace() the angular brackets into ascii. If anyone could tell me where I am going wrong as far as having my test <body> tag showing up in the console that would be much appreciated.
<code class="lang-html">
<body></body>
</code>
(function() {
var html = $('.lang-html').innerHTML;
html.replace('<', '<');
html.replace('>', '>');
console.log(html);
});
Just to clarify, I am expecting that the console would spit out <body></body>.
Any help would be much appreciated.
A few things:
$('.lang-html').innerHTML
Assuming this is jQuery, this won't work. .innerHTML only works on raw DOM elements, like what's returned from document.getElementById(...). Instead, $('.lang-html') returns a jQuery collection, which has its own accessor methods. You should do:
$('.lang-html').html() // get the HTML as text from this element
Moving on, .replace() won't modify the original string. It returns a new copy. In the simplest case you can do:
var html = $('.lang-html')
.html()
.replace('<', '<')
.replace('>', '>');
But you still have to re-assign it to the HTML source. Again, jQuery provides a simple API for this.
$('.lang-html').html(html);
However, there's one more problem. .replace() only replaces the first match in a string. To replace all of them, you need to construct a regex and use the /g (global) flag. Here's the complete code:
var $element = $('.lang-html');
var html = $element.html()
.replace(/</g, '<')
.replace(/>/g, '>');
$element.html(html)
If you want get html code representation of an DOMElement in your browser then you won't need the replace to escape the html special chars. But you can use the browser to take care of all edge cases.
You could just use innerHTML/outerHTML and textContent.
This will e.g. will replace the content of the body with its html code representation.
var elm = document.getElementsByTagName('body')[0];
elm.textContent = elm.outerHTML;
Or if you just want to have the result as string but not displayed in the browsers then you could wrap that into a function:
function escapeHTML(html) {
var div = document.createElement('div');
div.textContent = html;
return div.innerHTML;
}
console.log( escapeHTML('<div>test</div>') );
You can also do a
$('.lang-html').prop("innerText")
which will hand you back the contents of that div, as real text.
No further translation should be needed.
Actually <body> tags will not be returned in the innerHTML of the posted code because the HTML is invalid. To explain:
To cater for changes to the DOM made in Javascript, browsers dynamically create innerHTML strings from the DOM by inspecting child elements of a specified node and generating HTML code from them.
Since <body> tags are only valid immediately following the head section, browsers silently respond to the <code> tag in your post by first creating a body element in which to place it. The <body> tags which follow are then ignored because they are invalid in this position. Hence there is no body element child of the code node, and no body tags in its innerHTML
Update (2): To pretty print the HTML without viewing page source you could try.
(function() {
var body = document.body;
var html = body.parentNode.outerHTML;
html = html.replace(/</g, '<');
html = html.replace(/>/g, '>');
html = html.replace(/\ /g, " ");
html = html.replace(/\n/g, '<br>\n');
// console.log(html);
body.innerHTML = html;
body.style.fontFamily = "monospace";
});
I am getting html content as below:
var test='<div id="test">Raj</div>';
How can i retrieve value Raj from above html content using javascript.
It sounds like you're trying to extract the text "Raj" from that HTML snippet?
To get the browser's HTML parser to do your dirty work for you:
// create an empty div
var div = document.createElement("div");
// fill it with your HTML
div.innerHTML = test;
// find the element whose text you want
test = div.getElementById("test");
// extract the text (innerText for IE, textContent for everyone else)
test = test.innerText || test.textContent;
Or in jQuery:
test = $(test).text();
If you use jQuery (I cannot believe I just said that ;)) you can get at the content immediately you wrap it in $(test).html
Someone else will tell you how to get at the innerHTML using a selector since everybody here are jQuery gurus but me
Update: somebody just did while I was editing: javascript: extracting text from html - see comments or updates to that
var test = getElementById('test')
try that