Adding new lines in a textarea with javascript (ie 9) - javascript

Looked all over, but I can't find the answer. I am trying to generate JSON from some inputs and display the generated JSON in a textarea, like below. But no matter what I try, I can't get my fields to show on separate lines. Any help appreciated
var txt = "{a : 'a',\r\nb : 'b'\r\n}";
document.getElementById('eventsJSON').innerHTML = txt;
Edit: I have simplified my example to something reproducable that demonstrates my problem

You can try this replace function:
.replace(/(\r\n|\r|\n)/g, '\r\n');
It might also be a matter of using an innerText instead of a value change:
... elem.innerText + (!fields.local[i].number ? "'" : '') ...

Related

Can't use document.getElementById().innerHTML to rewrite the original html

I am tring to add some content after the original content, but the new content will cover the original content everytime...What wrong in this case? (Sorry for my terrible english...)
var originaltext = document.getElementById("id").innerHTML;
document.getElementById("id").innerHTML = originaltext + "newtext";
One more thing,I tried to use alert to show the "originalltext", but it have nothing to show.
alert(originaltext);
your code looks ok to me. I made a jsfiddle for you just to see that it works http://jsfiddle.net/3mqsLweo/
var myElement = document.getElementById('test');
var originalText = myElement.innerHTML.toString();
myElement.innerHTML = originalText+" new text";
check that you only have one element with the id "cartzone"
A simple and fast way to do this is to concatenate the old value with the new.
document.getElementById('myid').innerHTML += " my new text here"
this problem usually occurs when the rest of your code is poorly written and contains errors or when the same ID is used several times.
I had the same problems in the past.
you have tow options:
check the rest of your code (validate)
use jQuery - I don't know how, but it works every time.

Jquery Own Html Text Editor

I'm trying make my own html text editor. Like you see picture. I wrote bold, italic, there is no problem.
But when i wrote code (like html code), like you see only write "Test", But I wrote in textarea <p>Test</p>
And I'm using SyntaxHighlighter plugin for display my codes.
And you see my code below
function Textarea(input, preview) {
var text = input.val().replace(/\[b\]/g, "<b>").replace(/\[\/b\]/g, "</b>")
.replace(/\[i\]/g, "<i>").replace(/\[\/i\]/g, "</i>")
.replace(/\[u\]/g, "<u>").replace(/\[\/u\]/g, "</u>")
.replace(/\[s\]/g, "<s>").replace(/\[\/s\]/g, "</s>")
.replace(/\[img\]/g, "<br/><p></p><img src='").replace(/\[\/img\]/g, "' /><br/><p></p>")
.replace(/\[link/g, "<a").replace(/URL="/g, "href='").replace(/"\]/g, "'>").replace(/\[\/link\]/g, "</a>")
.replace(/\[code/g, "<pre").replace(/type="/g, "class='brush:").replace(/"\]/g, "'>").replace(/\[\/code\]/g, "</pre>");
preview.html(text);
}
I know it cause for preview.html(text), I need also write like preview.text(text) code.
But I dont know, how can i do this?
Thanks.
a quick way is to create a element inject the html code as text, then get it back out as html, then the tags, and other characters, should then be in entity form, eg < as < etc
$('<div></div>').text(input.val()).html().replace...
But there are some issues with it, eg whitespaces maybe removed
Because of that this answer shows creating a function that you can use to encode characters, which just encodes the <,>,",',& characters. You could add other characters to the replace to extend the function.
So what you need to do is html encode the raw text given by the user, then replace the bracket entities with html, and finally set the html of the output div. Here's a simple example of that:
http://jsfiddle.net/2K97x/
String.prototype.htmlEncode = function () {
return $('<div/>').text(this).html();
};
function replaceEntities(value) {
return value.replace(/\[b\]/g, "<b>").replace(/\[\/b\]/g, "</b>")
.replace(/\[i\]/g, "<i>").replace(/\[\/i\]/g, "</i>")
.replace(/\[u\]/g, "<u>").replace(/\[\/u\]/g, "</u>")
.replace(/\[s\]/g, "<s>").replace(/\[\/s\]/g, "</s>")
.replace(/\[img\]/g, "<br/><p></p><img src='").replace(/\[\/img\]/g, "' /><br/><p></p>")
.replace(/\[link/g, "<a").replace(/URL="/g, "href='").replace(/"\]/g, "'>").replace(/\[\/link\]/g, "</a>")
.replace(/\[code/g, "<pre").replace(/type="/g, "class='brush:").replace(/"\]/g, "'>").replace(/\[\/code\]/g, "</pre>");
}
var rawValue = $('input').val();
var htmlEncoded = rawValue.htmlEncode();
var newHtml = replaceEntities(htmlEncoded);
$('div').html(newHtml);

How to find and replace text in between two tags in HTML or XML document using jQuery?

I want to find and replace text in a HTML document between, say inside the <title> tags. For example,
var str = "<html><head><title>Just a title</title></head><body>Do nothing</body></html>";
var newTitle = "Updated title information";
I tried using parseXML() in jQuery (example below), but it is not working:
var doc= $($.parseXML(str));
doc.find('title').text(newTitle);
str=doc.text();
Is there a different way to find and replace text inside HTML tags? Regex or may be using replaceWith() or something similar?
I did something similar in a question earlier today using regexes:
str = str.replace(/<title>[\s\S]*?<\/title>/, '<title>' + newTitle + '<\/title>');
That should find and replace it. [\s\S]*? means [any character including space and line breaks]any number of times, and the ? makes the asterisk "not greedy," so it will stop (more quickly) when it finds </title>.
You can also do something like this:
var doc = $($.parseXML(str));
doc.find('title').text(newTitle);
// get your new data back to a string
str = (new XMLSerializer()).serializeToString(doc[0]);
Here is a fiddle: http://jsfiddle.net/Z89dL/1/
This would be a wonderful time to use Javascript's stristr(haystack, needle, bool) method. First, you need to get the head of the document using $('head'), then get the contents using .innerHTML.
For the sake of the answer, let's store $('head').innerHTML in a var called head. First, let's get everything before the title with stristr(head, '<title>', true), and what's after the title with stristr(head, '</title>') and store them in vars called before and after, respectively. Now, the final line is simple:
head.innerHTML = before + "<title>" + newTitle + after;

How to concatenate data from document.getElementById

I have two text fields in an html form with id 'co_addrcheck' and 'usrad_co_addr'. I tried concatenating the two values and copy that to another text field. I tried using the following code but the new text has an 'undefined' value.
var loc = document.getElementById('co_addrcheck');
var home = document.getElementById('usrad_co_addr');
Neither
var post2 = loc + home;
nor
var post2 = loc.value + home.value;
works.
Any help would be highly appreciated.
Assuming they're text inputs, you should use the "value" property,
var post2 = loc.value + home.value;
I hope it helps
Second one should be working. And best advice is to enclose within try/catch and see the error message.

Insert a whole element into another element, not just its inner HTML

I'm trying to figure out how to use jQuery to construct HTML as sanely as possible. As far as I can tell, this should produce <div><span>Alice</span></div>, but instead produces <div>[object Object]</div>:
post = $("<div>");
username = $("<span>").html("Alice");
post.append(username);
I've found that replacing the last line with post.append(username.html()) gets me closer to my goal, but it omits the <span> tags if I do it that way. How do I insert a child element with the surrounding tags, and without writing out "<span>" + username + "</span>", which seems like a novice approach to the task?
EDIT: Stupid mistake. The snippet I posted above was excessively simplified; I was really trying to do post.append(username + another_span_element) in my code. Obviously I can't append objects like that. I've changed it to post.append(username); post.append(another_span_element); and now it works fine. Durr!
Works for me: $("<div>").append($("<span>").html("Alice"))[0].outerHTML == "<div><span>Alice</span></div>"
What you're aiming for is done with the text() method:
post = $("<div>");
username = $("<span>").text("Alice");
post.append(username);
Example here.
Is there a reason for not doing:
$('<div><span>Alice</span></div>').appendTo('body');
or
var username = "Alice";
$('<div><span id="user"></span></div>').appendTo('body');
$(username).appendTo('#user');
or
var username = "Alice";
$('<div><span id="user"></span></div>').appendTo('body');
$('#user').html(username);
or
var username = "Alice";
$('<div><span id="user"></span></div>').appendTo('body');
$('#user').text(username);
or any of the other 200 options?

Categories