I wanted to save the text inside a contenteditable div being pre formatted. How would i get the pre form of the text and not the text where \n and \r are ommitted?
$('#save').click(function(e) {
var id = "board_code";
var ce = $("<pre />").html($("#" + id).html());
if ($.browser.webkit)
ce.find("div").replaceWith(function() { return "\n" + this.innerHTML; });
if ($.browser.msie)
ce.find("p").replaceWith(function() { return this.innerHTML + "<br>"; });
if ($.browser.mozilla || $.browser.opera || $.browser.msie)
ce.find("br").replaceWith("\n");
alert( ce.text() );
});
http://jsfiddle.net/AD5q7/10/ this doesnt work
try string for contenteditable div
UPDATE: try the string by typing it. There maybe no problem when the string is pasted.
1
abc def
gh i
jkl
2
#include<iostream.h>
#include<conio.h>
int main(){
int grade, passingMark=75;
cout<<"Hi there, please enter your mark: ";
cin>>grade;
if( ((grade >= passingMark)||(grade==35)) && (grade<101)){
cout<<"\nPass!";
}
return 0;//15lines
}
The save file must be also formatted like this and not without \n\r removed. Im expecting that the alert should include \n
When contenteaditable div looses focus, the entire text gets converted to html for eg
<div contenteditable="true">Your text is here
and has new line </div>
upon loosing focus it converts the virtual textarea to html i.e.
<div>Your text is here</div><br><div>and has new line </div>
and when you'll attempt .text(), you'll loose the desired alignment as actually the don't exist anymore in that div.
Solution
1. You can use textarea, with border properties set to 0 which would make it look like a contenteditable div or
2. You can grab the entire html of the contenteditable div and replace the html with the corresponding text representations using javascript (for that refer javascript regex replace html chars)
Try this
alert( ce.text().replace(/\n/g, "\\n" ).replace(/\r/g, "\\r"));
Related
I'm using Prototype's PeriodicalUpdater to update a div with the results of an ajax call. As I understand it, the div is updated by setting its innerHTML.
The div is wrapped in a <pre> tag. In Firefox, the <pre> formatting works as expected, but in IE, the text all ends up on one line.
Here's some sample code found here which illustrates the problem. In Firefox, abc is on different line than def; in IE it's on the same line.
<html>
<head>
<title>IE preformatted text sucks</title>
</head>
<body>
<pre id="test">
a b c
d e f
</pre>
<script type="text/javascript"><!--
var textContent = document.getElementById("test").innerText;
textContent = textContent.replace("a", "<span style=\"color:red;\">a</span>");
document.getElementById("test").style.whiteSpace = "pre";
document.getElementById("test").innerHTML = textContent;
--></script>
</body>
</html>
Anyone know of a way to get around this problem?
Setting innerHTML fires up an HTML parser, which ignores excess whitespace including hard returns. If you change your method to include the <pre> tag in the string, it works fine because the HTML parser retains the hard returns.
You can see this in action by doing a View Generated Source after you run your sample page:
<PRE id="test" style="WHITE-SPACE: pre"><SPAN style="COLOR: red">a</SPAN> b c d e f </PRE>
You can see here that the hard return is no longer part of the content of the <pre> tag.
Generally, you'll get more consistent results by using DOM methods to construct dynamic content, especially when you care about subtle things like normalization of whitespace. However, if you're set on using innerHTML for this, there is an IE workaround, which is to use the outerHTML attribute, and include the enclosing tags.
if(test.outerHTML)
test.outerHTML = '<pre id="test">'+textContent+'</pre>';
else
test.innerHTML = textContent;
This workaround and more discussion can be found here: Inserting a newline into a pre tag (IE, Javascript)
or you could
if (el.innerText) {
el.innerText = val;
} else {
el.innerHTML = val;
}
Don't know if this has been suggested before, but the solution I found for preserving white space, newlines, etc when doing an innerHTML into a 'pre' tag is to insert another 'pre' tag into the text:
<pre id="pretag"></pre>
TextToInsert = "lots of text with spaces and newlines";
document.getElementById("pretag").innerHTML = "<pre>" + TextToInsert + "</pre>";
Seems I.E. does parse the text before doing the innerHTML. The above causes the parser to leave the text inside the additional 'pre' tag unparsed. Makes sense since that's what the parser is supposed to do. also works with FF.
It could also be rewritten 'the Python way', i.e.:
el.innerText && el.innerText = val || el.innerHTML = val;
I realise that similar questions have been asked, but none quite like this.
I have a situation where I am using BEM to display some classes in code tags. Below is an example:
Obviously the default behaviour is to break words at a hyphen, as we can see is happening in the example. Is there a way that I can control what characters the line-break occurs at? I would like to be able to have class name integrity maintained so that the line break occurs before each period . if necessary.
I have another solution using jquery,
$('.mypara').each(function () {
var str = $(this).html();
var htmlfoo = str.split('.').join('</br>');
$(this).html(htmlfoo);
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<code class="mypara">
This is-the HTML if its - characters exceed 50. characters it should go-to next line
</code>
<code class="mypara">
This is the HTM-if its. characters exceed 50 - characters it should. go-to next-line
</code>
Unfortunately I don't think there is a way to do everything you want with pure CSS.
UPDATE: removed spaces before periods in JS solution.
If you are able to use JavaScript you could process the code tag's contents to disable wrapping for words with hyphens and you could wrap each block starting with a period in an inline-block span.
The following code breaks the contents of each code tag into a list of blocks that start with either space or period. Each block is wrapped with a span that prevents wrapping, and blocks that begin with a period are additionally marked as display: inline-block;. This should give the behaviour you are looking for, and additionally preserve all content when copy-pasting text.
CSS:
.no-wrap-hyphen {
white-space: nowrap;
}
.wrap-period {
display: inline-block;
}
JavaScript (run this function on window load and resize):
function wrapPeriodsNotHyphens() { // run on window load or resize
var codes = document.getElementsByTagName( "code" );
for ( var i = 0; i < codes.length; i++ ) {
currentCode = codes[ i ].innerHTML.split(/(?=[ .])/); // split by spaces and periods
for ( var c = 0; c < currentCode.length; c++ ) {
// surround each item with nowrap span
currentCode[ c ] = '<span class="no-wrap-hyphen">' + currentCode[ c ] + '</span>';
if ( currentCode[ c ].indexOf( '.' ) > -1 ) {
// add a zero size space at the start for periods
currentCode[ c ] = '<span class="wrap-period">' + currentCode[ c ] + '</span>';
}
}
codes[ i ].innerHTML = currentCode.join('');
}
}
I am trying to make a web to change the data base. The problem is that some attributes from the DB are in html format, and when I try to set the input's value to the current DB attribute, it crashes.
The code that I use is the following:
$('#projectlist').DataTable( {
"createdRow": function ( row, data, index ) {
var ele = $('td', row).eq(1);
var id_input = $('td', row).eq(0);
id_input = id_input[0].innerHTML;
ele[0].innerHTML = '<input id="'+id_input+'" value="'+ele[0].innerHTML+'" style="width:100%; height: 25px;">';
},
data: data
} );
This just sets the second element from the table to be an input with the value equal to the DB.
But when the DB has html code like this one
text \" moretext
the input finishes at the \ and following text is shown as regular text instead of input.
here's an image of the problem. As you can see the top input is how it should be showing and the bottom input has the text that doesn't stay inside in the input box, it justs contiunes like text.
like k-nut said, doing it with jquery solves the problem. If someone is interested, changing the code to this solved the problem:
var ele = $('td', row).eq(1);
var id_input = $('td', row).eq(0);
var content=ele[0].innerHTML;
id_input = id_input[0].innerHTML;
ele[0].innerHTML = '<input id="'+id_input+'" style="width:100%; height: 25px;">';
$( "#"+id_input ).val(content);
<div id=bar>
Hey, <b>how</b> are <span><u><b>you</b>?</u></span>
</div>
I need to parse this code and set a span tag in a determined position identified by a start and an end.
An example is: START: 15 - END: 16
(note, "start" and "end" are set from the simple string "Hey, how are you?")
<div id=bar>
Hey, <b>how</b> are <span><u><b>y<span id=someid>ou</span></b>?</u></span>
</div>
My idea is to parse the node "bar", getting its html code, and with a complex OOP algoritm set the span tag, but...it's hard and long to do. (everything in JS)
Is there a good programming language to semplify my work?
I think I get what you are trying to do. Try this out:
var text = $("#bar").text(); //jQuery gives you the text...strips the html tags
var html = $("#bar").html(); //jQuery gives you the html and text here
text = $.trim(text); //remove any whitespace from start and end
var original = text.substr(14, 2); //Get the substring you want
var updated = "<span id='someid'>" + original + "</span>";
html = html.replace(original, updated); //replace
$("#bar").html(html); //set new html
JsFiddle here: http://jsfiddle.net/bbcLm97o/2/
I want to add a newline in a textarea. I tried with \n and <br/> tag but are not working. You can see above the HTML code. Can you help me to insert a newline in a textarea?
<textarea cols='60' rows='8'>This is my statement one.\n This is my statement2</textarea>
<textarea cols='60' rows='8'>This is my statement one.<br/> This is my statement2</textarea>
Try this one:
<textarea cols='60' rows='8'>This is my statement one.
This is my statement2</textarea>
Line Feed and
Carriage Return are HTML entitieswikipedia. This way you are actually parsing the new line ("\n") rather than displaying it as text.
Break enter Keyword line in Textarea using CSS:
white-space: pre-wrap;
I think you are confusing the syntax of different languages.
is (the HtmlEncoded value of ASCII 10 or) the linefeed character literal in a HTML string. But the line feed character does NOT render as a line break in HTML (see notes at bottom).
\n is the linefeed character literal (ASCII 10) in a Javascript string.
<br/> is a line break in HTML. Many other elements, eg <p>, <div>, etc also render line breaks unless overridden with some styles.
Hopefully the following illustration will make it clearer:
T.innerText = "Position of LF: " + t.value.indexOf("\n");
p1.innerHTML = t.value;
p2.innerHTML = t.value.replace("\n", "<br/>");
p3.innerText = t.value.replace("\n", "<br/>");
<textarea id="t">Line 1
Line 2</textarea>
<p id='T'></p>
<p id='p1'></p>
<p id='p2'></p>
<p id='p3'></p>
A few points to note about Html:
The innerHTML value of the TEXTAREA element does not render Html. Try the following: <textarea>A <a href='x'>link</a>.</textarea> to see.
The P element renders all contiguous white spaces (including new lines) as one space.
The LF character does not render to a new line or line break in HTML.
The TEXTAREA renders LF as a new line inside the text area box.
I've found String.fromCharCode(13, 10) helpful when using view engines.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode
This creates a string with the actual newline characters in it and so forces the view engine to output a newline rather than an escaped version. Eg: Using NodeJS EJS view engine - This is a simple example in which any \n should be replaced:
viewHelper.js
exports.replaceNewline = function(input) {
var newline = String.fromCharCode(13, 10);
return input.replaceAll('\\n', newline);
}
EJS
<textarea><%- viewHelper.replaceNewline("Blah\nblah\nblah") %></textarea>
Renders
<textarea>Blah
blah
blah</textarea>
replaceAll:
String.prototype.replaceAll = function (find, replace) {
var result = this;
do {
var split = result.split(find);
result = split.join(replace);
} while (split.length > 1);
return result;
};
<textarea cols='60' rows='8'>This is my statement one.
This is my statement2</textarea>
Fiddle showing that it works: http://jsfiddle.net/trott/5vu28/.
If you really want this to be on a single line in the source file, you could insert the HTML character references for a line feed and a carriage return as shown in the answer from #Bakudan:
<textarea cols='60' rows='8'>This is my statement one.
This is my statement2</textarea>
Try this. It works:
<textarea id="test" cols='60' rows='8'>This is my statement one.
This is my statement2</textarea>
Replacing for <br> tags:
$("textarea#test").val(replace($("textarea#test").val(), "<br>", "
")));
To get a new line inside text-area, put an actual line-break there:
<textarea cols='60' rows='8'>This is my statement one.
This is my statement2</textarea>
You might want to use \n instead of /n.
After lots of tests, following code works for me in Typescreipt
export function ReplaceNewline(input: string) {
var newline = String.fromCharCode(13, 10);
return ReplaceAll(input, "<br>", newline.toString());
}
export function ReplaceAll(str, find, replace) {
return str.replace(new RegExp(find, 'g'), replace);
}
You should also check the css white-space property (mdn docs) of your element, make sure it's set to a value that doesn't suppress line breaks, e.g.:
white-space: pre-line;
You'd be interested in these 3 values:
pre
Sequences of white space are preserved. Lines are only broken at
newline characters in the source and at <br> elements.
pre-wrap
Sequences of white space are preserved. Lines are broken at
newline characters, at <br>, and as necessary to fill line boxes.
pre-line Sequences of white space are collapsed. Lines are broken at
newline characters, at <br>, and as necessary to fill line boxes.
My .replace()function using the patterns described on the other answers did not work. The pattern that worked for my case was:
var str = "Test\n\n\Test\n\Test";
str.replace(/\r\n|\r|\n/g,'
');
// str: "Test
Test
Test"
T.innerText = "Position of LF: " + t.value.indexOf("\n");
p3.innerText = t.value.replace("\n", "");
<textarea id="t">Line 1
Line 2</textarea>
<p id='p3'></p>
If you are using react
Inside the function
const handleChange=(e)=>{
const name = e.target.name;
let value = e.target.value;
value = value.split('\n').map(str => <span>{str}<br/></span>);
SetFileds({ ...fileds, [name]: value });
}
A simple and natural solution not involving CSS styles or numeric character references like
would be to use the 
 character entity reference:
The cardinal directions are:
- North
- East
- South
- West
Note: Since this is defined simply as the LF (line feed, or the U+000A Unicode code point) character, it's not 100% certain whether it suits situations where the entire CR + LF (carriage return + line feed) sequence is required. But then, it worked in my Chrome, Edge and WebView2 tests done on Windows 10, so it should be ok to use.
just use <br>
ex:
<textarea>
blablablabla <br> kakakakakak <br> fafafafafaf
</textarea>
result:
blablablabla kakakakakak fafafafafaf