How to get input text from text edit - javascript

I have simple text editor, where user can use bold/italic etc format for input. This is simply generating text in div container of id="sampleeditor", so if user want bold it`s just adding html tag , italic so the generated dom code for BOLD ENTER ITALIC will looks like:
<div class="editor" id="sampleeditor" contenteditable="true">
<b>BOLD</b>
<div><b>
<i>ITALIC</i>
</b>
</div>
</div>
The thing is that i want to fetch whole user input data which are stored in the main div and save it to json file, but when i try to get that div value:
var x = document.getElementById("sampleeditor").value;
console.log(x);
It`s just loging - undefined, so how to target whatever is inside that div?

Divs do not have value properties, you have to use inner html
var x = document.getElementById("sampleeditor").innerHTML;
console.log(x);

this is my solution
var x = document.getElementById("sampleeditor").innerText;
console.log(x);

let x = document.querySelector(".editor");
console.log(x.textContent);
<div class="editor" id="sampleeditor" contenteditable="true">
<b>BOLD</b>
<div>
<b>
<i>ITALIC</i>
</b>
</div>
</div>

Related

How to get text of every text node in Cheerio?

<div>
<p>Hello World!</p>
foo
</div>
I want to get only the text of the text nodes inside the div, and I can't use $('div').text() because that gives me the text of the p also.
Actually I would like to get the text of every such text node, and I hope there's something as simple as $('textNode').toArray().map((node) => $(node).text()).

How to get plain text from highlight.js element?

I use highlight.js this way:
<div class="ex1" contenteditable="true">
<pre>
<code id="script_code" class="pgsql"></code>
</pre>
</div>
User can edit the code. When user wants to save changes I need to get plain text.
When I get it:
var pscriptText = document.getElementById(divCodeView).innerHTML;
I see the tags. How to get the plain text?
Use textContent instead of innerHTML:
var pscriptText = document.getElementById(divCodeView).textContent;

function to exchange tags

I have following paragraph in html code:
<p id=tag1> html statements before click </p>
... and I am trying to write function which would split the above paragraph to two paragraphs like this :
<p id=tag1> html statements after click </p><p id=tag2></p>
... with intention to exchange then tag1 id with tag2 id to have final result:
<p id=tag2> html statements after click </p><p id=tag1></p>
I am trying to achieve desired result by this function:
&ltscript>
function myFunction() {
document.getElementById("tag1").innerHTML = "html statements after click &lt/p>&ltp id='tag2'>";
document.getElementById("tag2").id = "tagTmp";
document.getElementById("tag1").id = "tag2";
document.getElementById("tagTmp").id = "tag1";
}
&lt/script>
... but this donesn't work to me. Problem is with the first step - innerHtml modification works different ways as expected and yealds following result:
<p id=tag1> html statements after click
<p></p>
<p id=tag2></p>
</p>
... paragraph id=tag2 is still nested inside paragraph id=tag1 (I want to have the both paragraphs at the same level).
Is there any way to get requested functionality? Can you help please?
Thanks.
document.getElementById("tag1").innerHTML = "html statements after click </p><p id='tag2'>";
So the reason this is not acting as you expect it to is because this is not changing the markup, as you think it is. innerHTML does not include the open and close tags. Your interacting with a dom node, so you can't close the parent node like that. As you can see it tries to protect your weird request of a single </p> and creates a new open for it so it's paired.
If you were going to do this with jquery, as that's one of your post tags, it could possibly be something like...
//get the existing element
var $originalTag = $('#tag1');
//update its id
$originalTag.prop('id', 'tag2');
//create a new one after it with the original id
$('<p id="tag1"></p>').insertAfter($originalTag);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="tag1">An Existing Tag</p>
Here is a sample code for you
<html>
<div>
<p id=tag1> html statements before click </p>
</div>
<script>
var
p = document.querySelector('p'),
p2 = document.createElement('p');
p2.id = 'p2';
p2.textContent = ' p2...p2 '
p.outerHTML += p2.outerHTML;
</script>
</html>

Manipulation H1 Tag

I have the following Problem:
<h1 id="title">Text Text Text <br> Second Text Text Text </h1>
How can i change or manipulate the Text after the break-Tag ?
I cant change the HTML itself and it has to be done via JavaScript containing jQuery.
After manipulating it should look like this:
<h1 id="title">Text Text Text <br> <span id="preTitle"> blablabla </span></h1>
Anybody got a solution to this? Thanks in advance
Take the initial html inside h1 tag. Split it by br tag. Adjust the second part of splited html with span tag. Join splited parts with br tag and put them back into h1 tag:
var html = $("#title").html();
var parts = html.split("<br>");
parts[1] = "<span class='preTitle'>"+parts[1]+"</span>";
$("#title").html(parts.join("<br>"));
.preTitle{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1 id="title">Text Text Text <br> Second Text Text Text </h1>
You can use JQuery:
var titleHtml = $("#title").html().split('<br>');
$("#title").html(titleHtml[0]+"<br><span id='preTitle'>"+titleHtml[1]+"</span>");

preview of text using jquery

I have the following html
<img src="a.jpg" /><p> This is some random text and just to test this example. This is some random text and just to test this example. This is some random text and just to test this example<p>
<br><p>This is some random text and just to test this example This is some random text and just to test this example</p>
<img src="a.jpg" />
<br><p>This is some random text and just to test this example This is some random text and just to test this example</p>
My question is that if i have to give a preview of the text only using jquery suppose i have this in a variable named html how to display only few parts of the text ignoring the images
<div id="preview"></div>
$("#preview").val("//display only text in the variable named html")
You could filter images from the html:
var someHtml = '....';
$('#preview').html($(someHtml).filter(':not("img")'));
$('#preview').html(textWithTags.replace(/(<([^>]+)>)/ig,"").substr(0, 200));
Note: use .text() or .html() instead of .val() for DIV.
try this:
Here `.content` is class of wrapper of whole html you post
CODE:
$('.preview').click(function(){ // Here `.preview` is the `class` of submit button
html = $('.content').contents(':not(img)');
$('#preview').html(html)
});
OR
$('#preview').html($(yourhtml).not('img'));
OR
html = $('.content').html();
yourhtml = $(html).contents(":not('img')").text().substr(0, 200).concat('...'); // here I add `concat('...')` just for continuity. you may remove it,
$('#preview').html(yourhtml);

Categories

Resources