I'd like to create a template html file that loads content from a text file so that I don't have to change the html if I want to change text content. I'd like this text to be interspersed with images so I'd like to be able to reference each paragraph from the text individually. Thus, I'm looking for something along the lines of:
<div><p txt= [first paragraph from file.txt]></p></div>
<div><p txt= [second paragraph from file.txt]></p></div>
<div><p txt= [third paragraph from file.txt]></p></div>
<div><p txt= [fourth paragraph from file.txt]></p></div>
...
where file.txt is specified once at the beginning of the html file and the number of paragraphs in the text file might be variable. I suspect I'll need to use javascript. Is there a way to load each paragraph into some variable that I can reference to change each text attribute? To my knowledge [previous solutions][1] have loaded the entire text file as a single text chunk.
making a paragraph in html contain a text from a file
Related
I want to replace text in an XML file with a variable having tags. But I would not want to modify the text that is already within an element (<keyword>).
Find text = ABC
Replace = <keyword keyref="sname"><?xm-replace_text ABC?></keyword>
If the XML topic already has "<keyword keyref="sname"><?xm-replace_text ABC?></keyword>" i would not want the script to modify the "ABC" within the <Keyword> tag.
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>
I am currently using JavaScript plus XMLHttpRequest to dynamically load some text into some portions of my website. In my .xml file, I am attempting to include some HTML tags like b, i, etc. as I want some of the text to be formatted. When I load the actual page, it's like the tags cut the string short.
JavaScript
//Note: XML DOM is already loaded at this point...
//Get the text from .xml doc
var paragraph = xmlDOM.getElementsByTagName("Content")[0].childNodes[0].nodeValue;
document.getElementById("Paragraph").innerHTML = paragraph;
Example.xml
<Content>I am Some <b>Text</b></Content>
Loads to page like this
I am Some
Anyone know of a way to get around this like special escape characters that I can include in my .xml strings?
Got it!
Turns out I needed to use escape characters in my .xml doc for the HTML tags.
New Example.xml
<Content>I am Some <b>Text</b></Content>
This will now display as...
I am Some Text
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.