below is the <div> and <textarea> in my webpage
<div id="div_1" onclick="document.getElementById("textarea_1").innerHTML=document.getElementById("div_1").innerHTML;">
paragraph 1
paragraph 2
paragraph 3
paragraph 4
</div>
<textarea id="textarea_1"></textarea>
when i click the div i need to show <div> innerHTML to <textarea>
but its coming like below
<textarea id="textarea_1">paragraph 1<br><br>paragraph 2<br><br>paragraph 3<br><br>paragraph 4</textarea>
i need output like this (correct format of <div> )
<textarea id="textarea_1">
paragraph 1
paragraph 2
paragraph 3
paragraph 4
</textarea>
Your onclick is malformed. You are delimiting it with " and are using " as the inner string delimiters as well.
You are also using a comparison operator == instead of an assignment operator =.
onclick="document.getElementById("textarea_1").innerHTML==document.getElementById("div_1").innerHTML;"
This will work better:
onclick='document.getElementById("textarea_1").innerHTML=document.getElementById("div_1").innerHTML;'
Now, to address the actual question - getting <br> elements when you want line breaks.
When you do:
document.getElementById("div_1").innerHTML
You need to replace the <br> elements with line breaks:
document.getElementById("div_1").innerHTML.replace(/<br>/g, "\n")
document.getElementById("textarea_1").innerHTML = document.getElementById("div_1").innerHTML.replace(/<br>/g, "\n");
This should do the trick, you have to replace <br> tags by real newline character.
Instead of innerHTML you could use value on textarea
<!doctype html>
<html>
<head>
<title>Site Title</title>
</head>
<body>
<div id="div_1" onclick="document.getElementById("textarea_1").value = document.getElementById('div_1').innerHTML;">
paragraph 1
paragraph 2
paragraph 3
paragraph 4
</div>
<textarea id="textarea_1"></textarea>
</body>
`
Related
I want to keep only all these tags <strong></strong> , <em></em>, <p></p> , <strike></strike> etc right now i am using JavaScript regex like this.
var s = "<div><p>p tag</p> <strike>Strike</strike> <strong>strong</strong> in <u>underline</u> <em>italic</em> <span>this is span tag</span> <img src=''><br> final words</div>";
console.log(s.replace(/\<(?!strong|br|em|p|u|strike).*?\>/g, ""));
It is working 50% fine because it is not removing my defined html tags, but problem is it is removing all end tags here is how i am getting the output
Output :
<p>p tag <strike>Strike <strong>strong in <u>underline <em>italic this is span tag <br> final words
but i need the output something like this
Required Output:
<p>p tag</p> <strike>Strike</strike> <strong>strong</strong> in <u>underline</u> <em>italic</em> this is span tag <br> final words
Is there any javascript expert there who could help me with this i really appreciate your help.
Thanks
Match closing tags with an optional / right after the < and use positive lookahead for a word character (to ensure / doesn't get matched):
var s = "<div><p>p tag</p> <strike>Strike</strike> <strong>strong</strong> in <u>underline</u> <em>italic</em> <span>this is span tag</span> <img src=''><br> final words</div>";
console.log(s.replace(/<\/?(?=\w)(?!strong|br|em|p|u|strike).*?>/g, ""));
// ^^^^^^^^^
But regular expressions generally shouldn't be used in an attempt to parse anything but the most trivial HTML
Hi I would like to do a Word Count in my RTE (Rich Text Editor) with javascript can also use with jquery. But it should not count the html tags and repeating white spaces.
Sample Text:
<h1>Hello World</h1> <p> This is Good!!!</p> answer <h2>thanks! </h2>
The javascript should display 7 only.
Is there any javascript code for this and that is also fast to calculate the Word Count?
Thanks!
EDIT
What if the sample text is this: <p>11 22 33</p><p>44</p>5<br></div>
The javascript should display 5 only.
First you need to get text content of element. You can get text of element using text(). Then you need to remove additional space of text. trim() and replace(/[\s]+/g, " ") remove additional space in text. Now you can convert text to word using split() method.
var length = $(".text").text().trim().replace(/[\s]+/g, " ").split(" ").length;
console.log(length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text">
<h1>Hello World</h1>
<p> This is Good!!!</p>
answer
<h2>thanks! </h2>
</div>
I have a small problem that i cannot solve.I have this : <p>Text<span></span></p> and i want to change only the text of the <p>.Which means, when i click on an change-Button, the text based on an input field should replace the text.
What i have tried is something like this : $("p").text("newText") but this will also remove the <span>.
So how can i only change the text and not the inner html...
With your HTML above you can do
$('p').contents().first()[0].textContent='newText';
The idea is to take advantage of the fact that contents() includes text-nodes. Then, access by index [0] to get the native javascript DOM element and set the textContent
$('p').contents().first()[0].textContent = 'newText';
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<p>Text<span>inside span</span>
</p>
Put another span inside of the p tag and only change its contents:
<p>
<span id="theText">Text</span>
<span></span>
</p>
And then:
$('#theText').text('newText');
$('#theText').text('newText')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<span id="theText"></span>
<span>some other span</span>
</p>
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>");
I was using innerHTML property in javascript and suddenly I got a problem that the content inside <p><h3>....</h3></p> is not being fully replaced when applying .innerHTML on <p> tag in it. But when I make the same thing in a <div> as <div><h3>....</h3></div> it fully replaces the inner content. Can anyone tell me why is it happening?
See what's happening in this fiddle.
See full code below:
<html>
<head>
<title>innerHTML doubt</title>
<script type="text/javascript">
function changeContent(id){
document.getElementById(id).innerHTML="Content changed in id '"+id+"'.";
}
</script>
</head>
<body>
<p id="p1">
This content is in first <b>'p'</b> tag (can b fully replaced).
</p>
<button onclick="changeContent('p1')">Change upper content</button><hr/>
<p id="p2">
<h3>This content is in second 'p' tag with 'h3' tag inside (will not be replaced fully) </h3>
</p>
<button onclick="changeContent('p2')">Change upper content</button><hr/>
<div id="div1">
This content is in first 'div' (can b fully replaced).
</div>
<button onclick="changeContent('div1')">Change upper content</button><hr/>
<div id="div2">
<h3>This content is in second 'div' inside of 'h3'(will also b replaced fully)</h3>
</div>
<button onclick="changeContent('div2')">Change upper content</button>
</body>
</html>
Its happening because when you use <h3></h3> or any heading tag within p tag ,the closing tag gets out of scope.
Error when i validate code at W3C Markup Validator
See this Fiddle.In this fiddle you will see that in 2nd p only the text outside and before <h3></h3> will be replaced by innerHTML.That means <p> gets closed before <h3></h3> because using h3 within p is invalid.
Only solution
Use CSS style similar to h3 for styling text inside p tags.Demo Fiddle