jQuery - How to format readable HTML syntax? - javascript

I want to generate HTML code. The result is injected into a textarea. Afterwards a user can simply copy the result code. My problem is that the generated HTML code has no tabs and linebreaks, making it hard to read.
js fiddle
I want it to look like that:
HTML
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Just add a \n to the end of each line:
http://jsfiddle.net/9NCvd/3/
Note: You can add tabs. just use \t

You can't. That would take HTML to format, and HTML does not render inside of a textarea. If you want formatting, ditch the textarea and use something else.
Edit: I lied. You just have to insert line breaks \n where you want a new line.

You can't add tabs, but you can use \n after each line for line breaks and you can simulate tabs with (two or four) spaces.

I think you are trying to do something like: http://jsfiddle.net/hvuLU/
there is a decode function i created.
function myDecode(s){
return s.replace(/\</g,"<").replace(/\>/g,">");
}
This here, would allow you to do something like:
Paste into textbox to render in a box below it. Sort of how Stackoverflow has its textarea and then the render area.

Related

Insert emoji with zero width joiner using Javascript

I have not been able to successfully insert an emoji into the DOM using Javascript when I am given the codepoints and zero width joiners are used.
Consider this emoji: πŸ‘©β€πŸ‘©β€πŸ‘¦
I am able to create a string that looks like this:
πŸ‘©β€πŸ‘©β€πŸ‘¦
and insert it into the innerHtml of an element but the 3 characters end up getting displayed instead of the single combined character. If you look at the html on this page for this character, you can see that the html is formatted in the same way as my string is:
https://emojipedia.org/family-woman-woman-boy/
This is only an issue when zero width joiners are used.
So doing this:
el.innerHTML = "πŸ‘©β€πŸ‘©β€πŸ‘¦"
should result in a single character but it doesn't, so how can I get the single character to display. NOTE: the character cannot just be added by typing the text into an editor. The content is generated by javascript.
Not really sure what the question is here, but if you have a good UTF8/Unicode editor you can of course just paste the emoji into your text file.
If this is problematic you could build it up using HTML escaping.
Below I have done both, the first just pasting into the editor, unfortunately SO editor is not the best here. And the second one I use using HTML escaping..
Hope this helps..
update: Using your version also seems to work for me using Chrome,
what browsers are you using..?
document.querySelector("#container").innerHTML = "πŸ‘©β€πŸ‘©β€πŸ‘¦";
document.querySelector("#container2").innerHTML =
"πŸ‘©β€πŸ‘©β€πŸ‘¦";
document.querySelector("#container3").innerHTML =
"πŸ‘©β€πŸ‘©β€πŸ‘¦";
<div id="container">
</div>
<div id="container2">
</div>
<div id="container3">
</div>

Replacing to HTML Character Entities and reverting back

When replacing things in my chat room it comes up in the box as the 'HTML Character Entities'. However, I want it to revert back and actually show the character typed in when it is then shown in the chat room. So I am using the following code to stop any html from being entered and damaging the chat room by replacing certain html character with there entities (I want to get one or two working before I look at the others I know there are many more.) ....
Javascript
var str1 = this.value.replace(/>/g, '<');
if (str1!=this.value) this.value=str1;
var str2 = this.value.replace(/</g, '>');
if (str2!=this.value) this.value=str2;
and then the following code then displays the text after it has been entered into the database etc. and on updating the chat box it uses the following to add in the the updated messages ...
Returned from php and then displayed through the following javascript
$('#chatroomarea').append($("<p>"+ data.text[i] +"</p>"));
I have messed around with this a few times changing it to val and using
.html(.append($("<p>"+ data.text[i] +"</p>")));
Etc. But I have had no luck. I'm not quite sure how to do this I just need the HTML Character Entities to actually show up back in there true Character instead of displaying something such as... '&#62'
This might be something I need to actually put within the replacing code where it will include code of it's own on replacing such as (this is just an example I'm not exactly sure on how I would write it) ....
var str1 = this.value.replace(/>/g, '.html(<)');
Any help on this would be much appreciated, Thank you.
$('#chatroomarea').append($("<xmp>"+ data.text[i] +"</xmp>"));
HTML xmp tag
The use is deprecated, but supported in most browsers.
Another option will be to use a styled textarea , To my knowledge these two are the tags that doesn't bother rendering html tags as it is.

Jquery, line break in textarea.. don't get \n and get ↡

I am trying to get value of a textarea with line break. When I debug, the value is this way in jquery. the value stored in a variable like this:
"test<br>
test<br>
test"<br>
In .value of valueOf is: 'test↡test↡test'.
I wonder how can I convert it to \n in order to insert line break.. I'm using jquery to get the value and send by ajax to php!
thanks.. :)
Sorry my english..
Try this
val=document.getElementById('recommend').value;
val = val.replace(/<br\s*\/?>/mg,"\n");
Fiddle http://jsfiddle.net/eSub4/1/
I have put a couple of console.log in fiddle to show you how new line(\n) and html line break show up in console and compare it with the text from textarea to see that you are getting new line (\n) for text in textarea after using the regex. Keep firebug open to see the output
try
document.getElementById('textareaid').innerHTML;
you need to replace 'textareaid' with the actual id.
since you say you already have the data in a string, but its not formatted right, to turn the <br> into newlines, you can use this
textString=textString.replace(/<br>/g,"\n");
It works for me....
$("#id").val("<?php echo str_replace(array("\r\n","\r","\n","\\r","\\n","\\r\\n"),"<br>",$value); ?>".replace(/<br\s*[\/]?>/gi, "\n"));

Use JS to replace text in Gmail message body

I want to write an GnuPG extension for Google Chrome. So far, everything works as expected: If I detect ASCII armored crypt-text, I parse it with my extension and then replace it. (after password has been entered)
Gmail however litters the message body with an insane amount of tags, so my simple JS approach doesn't work anymore. Is there something which can select an certain amount of visible text, no matter how many tags are contained in it, and replace it with some other text? (the tags don't need to survive). ie I want to unencrypt the mailbody in place.
what do you need is something like this:
/<[^>]+>/g
this regexp will remove all tags, an leave plain text...
just gotta replace for nothing... something like this:
"<p>text <b>full</b> of <i>junk</i> and <u>unwanted</u> tags</p>".replace(/<[^>]+>/g, "");
...and about selecting an specific part you can use substring, I guess!
What I really needed to do was a little different:
expand my regex so it didn't care about tags:
var re = /-----[\s\S]+?-----[\s\S]+?-----[\s\S]+?-----/gm;
store all the matches, with tags
use the regex provided by gibatronic to remove tags and then further process the cleaned text using gpg
use body.innerHTML.replace() to replace the matches from 1) with the processed text from 3)
It works now, the only problem is it breaks Gmail. Site layout stays intact, but all buttons and links become defunct. Only solution is to reload the page. Gotta fix this :S

How do you make a <textarea> recognize that pushing the enter button is a \n character?

I have a <textarea> that I want to print the contents on the page below it. When it does this I want to make random words be omitted.
I have accomplished this. My problem is I want make it recognize when the enter button has been pushed in the <textarea> and display that below. I want those to not ever be omitted. I have gotten it so that when a <br/> is typed into the <textarea> it will not omit those and it will show the new lines. When I tried doing that with the \n it does not seem to recognize in the .value of the object that the enters are \n.
Any ideas how to fix this?
I also tried var txtAdd = document.getElementById('textLoc').value.replace("\n","<br/>"); and it did not work.
Maybe ".replace(/\n/g, '<br />');"?
I don't follow what you are trying to do, but is it possible that you need \r\n since that is the equivalent of newline on a windows machine (assuming you are running windows)?
I think its about way of saving the data first time you should use innerHTML property that you can save it with with out replacing with \n
Regards
Marwan

Categories

Resources