How to preserve whitespace when getting text in a variable - javascript

I'm trying to put text in a variable that preserves the whitespace. First, I receive my text from my database. This is how the text appears on the page as I used the function nl2br() to preserve the enters:
random text.
more random text.
I want to get this text in a variable while preserving the whitespace. Because the tags were wrapped in a div tag, what I tried was this:
var body = $("div").text();
However, when I console.log var body, the text's space isn't preserved and it comes out like this, without the newline preservation:
random text.    more random text.
Is there any way to preserve the whitespace when using variables to get the text of an element?

Use .html instead of .text.
$("div").html();
This will give you the html with br tags. Now you can replace them with new line and save into database.

Related

How to append newline to text value in javascript array?

I have a narrow button that contains an image and label text. The state of the button changes to one of several values which are stored as text in an array and then changed out with textContent.
One of the values forces a line break in the label text. I would like to reserve the "blank line" below my label so that layout isn't affected every time the label breaks to two lines of text. To accomplish this, I'm trying to append a newline to every single-line value. For layout reasons, I can't simply pad the container — I need it to match the height of a line of formatted text.
Is there any way to put a newline into a text array value? I've tried adding a CR to my text both within the array and prior to the array as a variable using:
Labelname + \n
Labelname\n
Labelname<br /> (HTML, I know)
var label = 'Labelname' + String.fromCharCode(13)
Nothing seems to make the newline "stick," and the console reveals the value "Labelname" without the newline.
HTML generally ignores whitespace (including newline characters). To have it rendered, you need to use an element that doesn't ignore whitespace (like <pre>), or opt in to <pre>-style whitespace handling via CSS with white-space: pre-wrap.
I ended up using innerHTML to put formatted text into the element. I was resistant to using it for various reasons, but it provided a straightforward solution to this problem.

Creating tag labels inside an editable div

What I am trying to do is to create a front-end editable tagbox (editable div). Whenever a user types a word into that box and presses , this box will change that word into a colorful label. The problem I am having is:
User types the first word in, presses the comma key.
The word is then wrapped in <a> tags.
User types the second word in, presses the comma key.
Now I have to leave the first wrapped word as it is and take only the second word into consideration to wrap it into an <a> tag as well. It's extremely tricky to me, I have no idea how to leave the first <a> tag alone and select "free" words for wrapping. This also means wrapping more than one word into a single <a> tag whenever the user decides to put a two-word tag. It has to work with any number of tags.
Could you please point me in the right direction? I am trying to solve this with jQuery. I don't necessarily need the code itself, because I know how to write it, I just need to come up with the right algorithm in my brain.
Alright, as requested :)
Depending on whether you keep the commas in the field after replacing or not, split the inner HTML of the editable content by comma and/or .
Try following
function wrapInLink(container){
var link_text = $(container).text().split(',').slice(-1).pop(); // finding the string for replacing with anghor tag
var html = $(container).html(); // getting the container html
html = html.replace(link_text, "<a href='link_to_be_given'>" + link_text + "</a>"); // replacing the link text with anchor tag
$(container).html(html); // replacing the container's html
}

Removing the last occurance of a string in javascript

I have several paragraphs of text that are being stripped of all of their formatting by a javascript function.
I have the function doing 99% of what I need it to do already, with one minor problem.
At the very end of the text it is putting two <br><br> tags that I do not want as it just adds blank white space at the end. In other areas of the text there are double <br> tags I want to leave in place.
So my question is how do I take the entire block of text and only remove the very last <br><br> tags?
How about using regular expressions:
var text = '<br><br> Hello there... <br><br>\n<p>How are you?</p><br><br>';
text = text.replace(/<br><br>$/, '');
the $ checks to make sure you only remove the one at the end of the string.

javascript text replacement

i am using jquery replaceText plugin. with this plugin i can successfully replace text of an element like this:
<div>some text to be replaced here.</div>
<script type="text/javascript">
$(function(){
$("div").replaceText("some text to be replaced here", "a new text for replacement");
})
</script>
however when that div becomes something like this:
<div>some text to be replaced here.</div>
the replacement is not working.
how should i proceed here?
When operating on the HTML of the page, all the tags are in the HTML stream so you can't just do a direct replacement of only the text without allowing for intervening tags.
It isn't matching "some text to be replaced here" because that string of text doesn't exist as a single string of text in this HTML:
div>some text to be replaced here.</div>
You would have to replace individual pieces of text that actually exist as individual streams of text like "some text to be " and "replaced".
So you want to replace a subset of text with another subset of text and you want to work across nodes.
Looks like you want a Range.
So you just have to make a new Range using document.createRange(). Make it point to where you content starts.
So just find the start node and the start offset somehow then call range.setStart(node, offset). I would presume the node will be your container and the offset is just calculated.
Then call range.extractContents() to remove the original text from the DOM.
Then just range.insertNode(textNode) to insert the next text into the DOM.

How do you make linebreaks in a HTML textarea result in breaks in the string?

I have a HTML <textarea> that I want to be able to make when the user pushes enter in the textarea it results in a linebreak when the string is stored in a variable and printed on the page.
How would I do this? I have seen it done before but I am not sure how to do it.
When you read the content of textarea just do this:
var text = document.getElementById(textAreaId).value.replace("\n","<br/>");
By this way, when you use the variable text, it will be able to break lines in html.
You should set the white-space property on your output to one of the pre values. See here for a list of allowed values and their effects: http://www.w3schools.com/CSS/pr_text_white-space.asp
<p style="white-space: pre;">Your text with newlines goes here.</p>
Or simply use <pre>, a HTML tag that has white-space: pre; by default, but this has the inconvenient of changing your font.
I would advise against storing <br />s instead of new line characters. If you want to have HTML breaks add them just to the output.
Assuming you are outputting as HTML, you'll need to replace the line breaks with <br> or wrap the text with the <pre> tag.
The <pre> tag defines preformatted
text.
Text in a pre element is displayed in
a fixed-width font (usually Courier),
and it preserves both spaces and line
breaks.

Categories