I have text from a JSON that looks something like this:
"some text some text some text \n\n New paragraph text \n\n Another new paragraph"
I then have a simple div that looks like this:
<div ng-bind="textFromJSON"></div>
For some reason, the text that is rendered to the page turns out without the line breaks. ie
some text some text some text New paragraph text Another new paragraph
If I look inspect that text with the chrome dev tools, it shows the blocks of text split up into paragraphs using the \n line breaks like I had anticipated.
some text some text some text
New paragraph text
Another new paragraph
Does anyone know how I can get the page to render it properly?
It does. The issue is html doesn't display it because of the white-space default setting, change your div to this:
<div ng-bind="textFromJSON" style="white-space:pre-wrap"></div>
See https://jsfiddle.net/xtqe7on2/ as an example
You can use <pre>
<div><pre>{{textFromJSON}}</pre></div>
Related
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, ' ');})
I need to make a text editor for my site. Here are a few questions that I have:
How can I retrieve the row selected in the text area using JavaScript?
How can I style the first line of the text without styling all rows the same?
Here is an example of what I need:
<textarea>
<span class='center_align'>Hello world</span>
<span class='left_align'>This is a nice paragraph aligned to the left.</span>
</textarea>
I know <textarea> reads HTML into its input, but how would I go about to style this?
Sounds like you need a Rich Text Editor: try TinyMCE (as used by WordPress): http://www.tinymce.com/
I have the following code:
<body>
<form>
<textarea id="textfield"></textarea>
<input type="button" onclick="func1()" value="Post">
</form>
<p id="para"></p>
</body>
When I type in textarea all the special tags <a>,<br> etc are ignored when I display them inside a <p> also all what I typed is displayed on one line and it doesn't even matter that I pressed return or use <br>, textarea seems to be taking html tags and turn them into a simple text.
This is the function I use to display the text area in html:
function func1()
{
document.getElementById("para").innerHTML=document.getElementById("textfield").innerHTML;
}
How do I take text from textarea and display it on screen normally(not in one line).
How do I modify textarea for a user who doesn't know how to use tags? when pressing a simple return should be translated to <br
First of all, for textareas you should use value and not innerHTML. Like this...
document.getElementById("para").innerHTML=document.getElementById("textfield").value;
Now, for the single line issue. In textarea, new lines are separated by \n. In your divs \n do not work. So you'll have to replace them with <br> tags. So rewriting your code snippet...
document.getElementById("para").innerHTML=document.getElementById("textfield").value.replace(/\r\n|\r|\n/g,"<br />");
The text in the textarea isn't html. It is just text, containing regular line break "\n". To display them, you either need to enclose the text in a pre tag, or replace the "\n" with <br>.
I would do the latter, since pre doesn't break at all if there's no break in the text, so you'll have a single long line and a scrollbar.
<textarea> does not take HTML and interprets it. I think what you are looking for is a Rich Text Editors if you want your users to be able to modify text without knowing the tag names
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.
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.