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.
Related
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
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.
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>
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 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