I am entering some text in a input box. When entering a text I am giving some spaces means
more then 1 space just say 4 or 5. But when I get the value from the input box and append to
a div. It replaces all extra spaces with once single space.
Example, I enter text like this.
"Hi can you please look on it ?"
then if get the value using $("#inpuboxid").val();
then append that value to div.
it become like this: "Hi can you please look on it ?"
How to achieve this, as browser automatically replaces extra spaces with once space
HTML squishes adjacent spaces together by default. Add a style of "white-space: pre;" to your div. This should keep all the white space in its contents.
<div style="white-space: pre;">Hi can you please look on it ?</div>
See this Fiddle
After you set the text of the element, you can use the html method to replace spaces with .
Here is an example.
$("#somelement").text($("#inpuboxid").val()).html(function(index,html){return html.replace(/ /g, ' ');})
Related
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.
I have one div with a temporal text, once other images are clicked I want to show a different text, for this I'm using the .text on javascript call, I can replace the text, my problem is that I can't create spaces or paragraph breaks. Can someone explain me how to implement it?
$("#memberTrigger").click(function() {
$("#memberDescriptionResponsive").text('This is the Large Description I want to appear within that text area defined previously. After this dot I would like to have a break of paragraph and continue in a secondary one, right now is showing on the same line as continuity');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3 id="memberDescriptionResponsive">Some Information of the Team Member</h3>
<div id="memberTrigger"></div>
text is for:
Get the combined text contents of each element in the set of matched elements, including their descendants, or set the text contents of the matched elements.
http://api.jquery.com/text/
And you should use html
This method uses the browser's innerHTML property. Some browsers may not return HTML that exactly replicates the HTML source in an original document. For example, Internet Explorer sometimes leaves off the quotes around attribute values if they contain only alphanumeric characters http://api.jquery.com/html/
$("#memberDescriptionResponsive").html('<span style="background:red">This is the Large Description</span><br>I want to appear within that text area defined previously. After this dot I would like to have a break of paragraph and continue in a secondary one, right now is showing on the same line as continuity');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="memberDescriptionResponsive">hey</div>
The text method inserts text. Just text. Not elements. If you want an element, then you need to use something else.
First, you need to change the h3 to something different. No HTML heading element is allowed to contain a paragraph.
Then you can use empty to clear the existing content and append to add new elements.
var heading = $("<h3 />").text("This is the Large Description I want to appear within that text area defined previously.");
var paragraph = $("<p />").text("After this dot I would like to have a break of paragraph and continue in a secondary one, right now is showing on the same line as continuity");
$("#memberDescriptionResponsive").empty().append([heading, paragraph]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="memberDescriptionResponsive"><h3>Some Information of the Team Member</h3></div>
You can add <br> in between where you want to add the break. but instead of using text you got to use .html
$("#memberTrigger").click( function() {
$("#memberDescriptionResponsive").html('This is the Large Description<br> I want to appear within that text area defined previously.<br> After this dot I would like to have a break of paragraph and continue in a secondary one, <br>right now is showing on the same line as continuity')});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3 id="memberDescriptionResponsive">Some Information of the Team Member</h3>
<div id="memberTrigger">a</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
}
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.
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.