Develop Reference

Escape characters within an HTML tag

I have a specific div that cannot have tags within it.
Whenever tags are found, I would like to escape them and display as regular text.
For example:
<div class='no-tags-div'>
<h1>Hi!</h1>
<p>Blablablabalablal</p>
</div>
Instead of displaying the Hi! as a header text followed by a paragraph of Blablablabalablal, I would like to literally display it with the tags:
<h1>Hi!</h1>
<p>Blablablabalablal</p>
I already have access to the content I just need to figure out how to escape any of these special characters.
Edit: I should probably specify, the content within the div is posted through an input. I am attempting to not allow users to post other tags through the input, so this isn't just static HTML text we are talking about here.

You can use < and > to escape < and >. If you're doing this on the server side, you can find and replace those. On the client, you can use element.innerText, as D. Pardal suggested, which replaces the contents of element with a text node, rather than interpreting it as HTML.

How to remove characters from html attribute values?

According to the author of htmlcompressor.com this can not be done as they have semantic meaning.
Here is the particular example:
<meta name='description' content='Foo lets you save and share all your
web bookmarks / favorites in one place. It is free with no advertising for life, and
has straight forward privacy controls.'>
removing the return characters you have:
<meta name='description' content='Foo lets you save and share all your web bookmarks / favorites in one place. It is free with no advertising for life, and has straight forward privacy controls.'>
which is a single line which is what I want to send to the browser.
I want to do this for all my HTML using some string manipulation. Is this possible to do or are there other cases where a return character has meaning? Is there a way to differentiate?

According to the HTML4.01 specification ( http://www.w3.org/TR/html4/struct/global.html#h-7.4.4.2 ), the content="" attribute of the <meta /> element is CDATA, which means that whitespace is not significant:
CDATA is a sequence of characters from the document character set and may include character entities. User agents should interpret attribute values as follows:
Replace character entities with characters,
Ignore line feeds,
Replace each carriage return or tab with a single space.
User agents may ignore leading and trailing white space in CDATA attribute values (e.g., " myval " may be interpreted as "myval"). Authors should not declare attribute values with leading or trailing white space.
So it looks like the author of htmlcompression is wrong.
Anyway, despite dire warnings to the contrary, you can probably get-away with using a regular expression to fix this.
I've forgotten the syntax to combine "match only this group, and replace in this sub-region" in regex, but this hack works:
This simple regex will capture the content of the content="" attribute:
<meta.+content='(.*)'>
Once you've got the content, you can do a straightforward '\r', '\n', ' ' -> ' ' replacement.

Whenever the specification is correct about content attribute being CDATA, a webmaster may use the value of any attribute such as "content" of the "meta" tag in the given example via JavaScript, and compressing the value of the attribute would alter the expected result.
So the author of htmlcompressor.com is correct in that they have a semantic meaning for the purpose of compression.
<meta id="m1" name="item1" content="Sample stuff:
1. This text is multiline on purpose.
2. And the author expects it to remain this way after compression.
So yes, it does matter...">
The same meta tag compressed:
<meta id="m2" name="item2" content="Sample stuff: 1. This text is multiline on purpose. 2. And the author expects it to remain this way after compression. So yes, it does matter...">
And to show the difference:
<script>
alert('"'
+ document.getElementById('m1').content
+ '"\n\n---------------\n\n"'
+ document.getElementById('m2').content + '"'
);
</script>
Afaik, the goal of that site is to compress documents without altering the resulting layout or functionality.
Live example: http://jsfiddle.net/7Qb74/

how to display whitespace characters.. but omit when text is selected

Setup:
I'd like to output some text that shows visible spaces, linebreaks, etc
(For the purpose of displaying strings for debug purposes (or for say a rich-text editor))
ie, id like to make the following type of substitutions
" " -> "<span class="whitespace">·</span>"
"\r" -> "<span class="whitespace">\\r</span>"
"\n" -> "<span class="whitespace">\\n</span>"
perhaps the following CSS rule could be defined
/*display whitespace chars as a light grey*/
.whitespace { color:#CCC; }
so that
this two line
string
would be displayed as
this·two·lined\n
\t string
The Question:
Is it possible so that when the above "visual-whitepace" text is selected / copied-to-clipboard... it copies without the whitespace markup?
Is there some CSS property to display x, but copy y?
javascript hack?
special whitespace-font?
other?

<style>.paragraph-marker:after { content: "\B6" }</style>
<p>Foo<span class="paragraph-marker"></span></p>
<p>Bar<span class="paragraph-marker"></span></p>
The :after is a "pseudo-selector" which matches a pseudo-node that immediately follows the affected element.
The content property can be used with these pseudo-nodes to specify the textual content of them. It comes in handy when specifying quotation marks before and after quoted sections, or list separators like commas in semantic HTML <ol> which you don't want to display in bullet format.
It should come in handy for your use case since browsers don't deal with pseudo-nodes when converting a DOM selection stored in the clipboard to plain text on paste.

http://codepen.io/msvbg/pen/ebgrj
Works fine in the latest version of Chrome. Flip the showWhitespace variable to try it both ways. It works by sticking a visible whitespace layer underneath the text layer, and only the top-most layer is copied by default.

Find and Highlight Arabic with diacritics Text in UIWebView

I'm viewing an Arabic with diacritics (tashkel) text in a UIWebView.
I also have a Search View.
I want to give the UIWebView a keyword and UIWebView finds and highlights it,
but the search should ignore the diacritics.
The main text should remain with the diacritics.
example :
if the text is " الَلَهُم صَلِ عَلى مُحَمّد و آل مُحمد "
and I tell the UIWebView to search for " محمد "
it should highlight "مُحَمّد " and " مُحمد " regardless of all the diacritics.
I think of two approaches :
1- I do the find and highlight by Javascript after the UIWebView load.
2- I edit the text by Objective-C before loading the UIWebView.

You have to first strip all the diacritics from the string, then you can compare without any diacritics. Use regular expression to remove the characters you don't want. Check out this fiddle i did, inside the strip() function you need to add all the diacritics you need to take out.
hope this helps.

The version below does not remove sukoon.
I have converted the eight diacritics (fatha, kasrah, damma, shaddah, sukoon and tanween) into their Unicode equivalent. It is much easier to manipulate Arabic converted into Latin characters in any text editor :
<html>
<head><meta charset="UTF-8"></head>
<body>
<script>document.write("حَرْفٌ".replace(/(\u0652)|(\u0650)|(\u064C)|(\u064E)|(\u064B)|(\u064F)|(\u064D)|(\u0651)/g,""));</script>
</body>
</html>
Resources used:
Arabic Keyboard with diacritics
Unicode Code Converter

Match HTML tag's content with a Javascript RegEx

I have the following HTML as a string in my JavaScript function:
<p>one</p> <p align='center'>two</p>
I want to extract this string:
"onetwo" (without quotes obviously)
Can you please suggest some pure JavaScript code (jQuery is also OK...) to get tags' content?

Using jQuery you don't need a complex regex, you can easily parse the HTML and use the DOM:
var s = "<p>one</p> <p align='center'>two</p>";
var wrapper = $('<div />').html(s);
var text = wrapper.text();
In this case $(s).text() would have also worked, but it will fail if you have free text on the first level (e.g. <p>1</p>2), so I usually avoid it.
Note that the result here is "one two" (not "onetwo"), because you have a space between the <p> tags.
If that's a problem, you can use wrapper.children().text() or wrapper.find('p').text(), for example, according to your exact needs.
Working example: http://jsbin.com/osidi3

I made the following Regex to grab content from XML tags.
This will only work with a tag that has content and is followed by a closing tag. Will not get contents of tags that contain other tags.
The tag name is in capture group 1 and the tag content is in capture group 2. This will work to get all content including <, >, ", ' and & inside of tag content.
<([^\s>]+)\s?[^>]*>(.*)(?:<\/\1)>