Replace \n with <br> is not working - javascript

In my mongoDB:
description: "Test\n\nTest"
When I try to show it in my ejs file the text ignores de "\n"
Test Test
My HTML
<div id="description">
<%= test.description %>
</div>
I tried to fix this using this code:
var desc = $('#description').text();
desc.replace("\n", "<br>");
$('.description').text(desc);
Also tried:
desc.replace(/(?:\r\n|\r|\n)/g, '<br />');
and:
desc.split("\n").join("<br />");
None of this worked
If I print var desc = $('#description').text(); in the Chrome console, it shows this:
Test
Test
What I'm doing wrong and how do i fix this?

Use html() instead of text() as you want to change the HTML markup....text() will ignore the <br> tags
Also you are just replacing the value not updating it.....need to put the replaced value in the desc variable by
desc = desc.replace(/\n/g, "<br>");
Also desc.replace("\n", "<br>"); will just replace the first \n match
Stack Snippet
var desc = "Test\n\nTest"
desc = desc.replace(/\n/g, "<br>");
$('#description').html(desc);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="description"></div>

Using your code, desc.split("\n").join("<br />"); works fine for me.
var desc = $('#description').text();
console.log("original text = " + desc);
desc = desc.split("\n").join("<br />");
console.log("using split/join = " + desc);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="description">
Here is
the contents of
the div
with line breaks in it.
</div>

Related

Get data-value from element in another file with jQuery

So basically I have some elements with some data-values in a file . I want to dynamically create links to them using those data-values to type the text, href etc.
For example, I have two divs, id'ed firstand second. They have importance values, respectively "most important" and "least important".
I want to create two links to them, with the phrase "This is a link to the most/least important div" using JavaScript/jQuery. Below is a non-working example.
File a.html (ommiting headings and such, ofc):
<div id='first' data-importance='most important'>This is the first div.</div>
<div id='second' data-importance='least important'>This is the second div.</div>
File b.html:
<p><a class='makelink' data-linkto='first'></a></p>
<p><a class='makelink' data-linkto='second'></a></p>
$(`.makelink`).each( function(){
var target = $(this).data('linkto');
$(this).attr('href','b.html#' + target);
var imp = $('b.html #' + target).data('importance');
$(this).html('Link to the ' + imp + ' div');
});
However nothing happens. Any help is appreciated.
Your code seems correct except the selector should be inside quote and the string generated in the html() is not properly formatted:
$('.makelink').each( function(){ // Enclosed the selector with single/double qoute
var target = $(this).data('linkto');
$(this).attr('href','#' + target);
var imp = $('#' + target).data('importance');
$(this).html('Link to the '+ imp + ' div'); // concatenate the string with the variable using +
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='first' data-importance='most important'>This is the first div.</div>
<div id='second' data-importance='least important'>This is the second div.</div>
<p><a class='makelink' data-linkto='first'></a></p>
<p><a class='makelink' data-linkto='second'></a></p>

get variable of new line into Text(h2)

So,I have a problem with writing some text(h2) with new line,I created the new line by '\n'.It writes it right into the console,but as h2 element it writes it in one line.
Code :
<h2 id="T4"></h2>
<script type="text/javascript">
var TEST = 'a' + '\n' + 'b'
console.log(TEST)
document.getElementById("T4").innerHTML = TEST
</script>
You need to use the HTML special line break tag <br/> like this:
<h2 id="T4"></h2>
<script type="text/javascript">
var TEST = 'a' + '<br/>' + 'b'
console.log(TEST)
document.getElementById("T4").innerHTML = TEST
</script>

Is there a way to add text to the beginning of tag value?

Is there any way you can add text to the beginning of a tag value like this.
<div id="idName">goes</div>
<script>
document.getElementById("idName").innerHTML += " here.";
</script>
But instead of adding it to the end add it to the beginning. I already tried this.
<div id="idName">goes</div>
<script>
document.getElementById("idName").innerHTML -= "Text ";
</script>
There must be a lot of ways to perform that, the easiest according to your example could be like this:
<div id="idName">goes</div>
<script>
document.getElementById("idName").innerHTML = "Text " + document.getElementById("idName").innerHTML + " here.";
</script>
var idName = document.getElementById("idName").textContent;
document.getElementById("idName").textContent = " here." + idName;
<div id="idName">goes</div>
You can save idName innerHTML before add or change it .
<div id="idName">goes</div>
<script>
var xidName = document.getElementById("idName").innerHTML;
document.getElementById("idName").innerHTML = "here " + xidName;
</script>

Jquery Replace function not working properly in ie7 and ie 8

I have the following Raduio buttons with Labeles associated with that.
<div id="dependents">
<input ng-non-bindable type="radio" id='Partner' name="relationship" class="dependent-relation" value='P' />
<label for="Partner">Prtner</label>
<input ng-non-bindable type="radio" id='Child' name="relationship" class="dependent-relation" value='C' />
<label for="Child">Child</label>
</div>
Above div will be added dynamically to the page. We can have multiple dependants.
So every time while appending this div, i'm changing the Id, name of Radio button along with for label. Below is the script i'm trying to replace.
var html = htmlContent; // html content will be above code
html = html.replace('Partner', 'Partner' + count); // Replacing Id : Working fine
html = html.replace('for="Partner"', 'for="Partner' + count + '"'); // Replacing for : Not working
html = html.replace('Child', 'Child' + count); // Replacing Id : Working fine
html = html.replace('for="Child"', 'for="Child' + count + '"'); // Replacing for : Not working
This is working perfect in IE9, IE 10, chrome, but its not working IE7 and IE8.
Can any one help me on this?
I have found the problem...
I think whenever i tried to replace like this
html = html.replace('name="relationship"', 'name="relationship"' + count + '"');
its not working(only in IE 8 & 7). Any suggestion???
the reason it does not work is because before you are replacing the same word.
Try with:
var html = "<div id="Dependents"> ... </div>";
html = html.replace('for="Partner"', 'for="Partner2' + count + '"');
html = html.replace('Partner', 'Partner' + count);
html = html.replace('Partner2', 'Partner');
html = html.replace('for="Child"', 'for="Child2' + count + '"');
html = html.replace('Child', 'Child' + count);
html = html.replace('Child2', 'Child');

Read json until "more" comment

I want to pull from a tumblr blog and display it on another webpage using javascript.
I'm using the $TUMBLR_BLOG/api/read/json feed which provides a variable filled with the information from the blog post.
I want to print everything up to the "<!-- more -->" set of characters in the 'regular-body' section, ie. I don't want to print everything in the 'regular-body' just up to that more section.
Any thoughts on how to do that?
Eg. API read: http://blog.intercut.yegfilm.ca/api/read/json
Eg. Basic code I'm using:
<script type="text/javascript" src="http://blog.intercut.yegfilm.ca/api/read/json"></script>
<script type="text/javascript">
// The variable "tumblr_api_read" is now set.
document.write(
'<h3> ' + tumblr_api_read.posts[0]['regular-title'] + '</h3>' +
tumblr_api_read.posts[0]['regular-body']);
</script>
<script type="text/javascript">
// The variable "tumblr_api_read" is now set.
var url = tumblr_api_read.posts[0]['url'];
var title = tumblr_api_read.posts[0]['regular-title'];
var body = tumblr_api_read.posts[0]['regular-body'];
body = body.substring(0,body.indexOf("<!-- more -->"));
document.write('<h3> ' + title + '</h3>' + body);
</script>
Simple as that :)
Something like responseData.split("<!-- more -->")[0] ?
Get the index of the <!-- more --> and print the substring upto that index.
sampleString = "Foo <!-- more --> Bar";
moreIndex = sampleString.indexOf("<!-- more -->");
if (moreIndex > 0) {
console.log(sampleString.substring(0, moreIndex));
}
JSFiddle
Use the javascript SubString() method:
Example:
var mystring = 'Hello World <!-- more -->';
alert(mystring.substring(0,mystring.indexOf("<!-- more -->")));
jsFiddle: http://jsfiddle.net/8CXd8/
Documentation: http://www.w3schools.com/jsref/jsref_substring.asp

Categories