Develop Reference

Regex to strip html tag with certain attribute

I have some invalidly-nested HTML like:
<form class="form1" method="get">
<div>
<input name="field1">
</form>
<form class="form2" method="get">
<input name="field1">
</form>
</div>
Yeah, it's a mess, don't ask. The invalid nesting is causing problems somewhere else. jQuery I think is expecting a closing </div>, and only finding it at the last one. It's then treating the second <form> tag as invalid, and also discarding the closing </form> immediately above it, and assuming everything between lines 1 and 9 are one form.
If I output these to the console:
$('.form1).html() - all of line 1 - 9
$('.form2).html() - undefined
So what I'm trying to do is treat the whole thing as a string, and use regex to strip out form2. I'm expecting a regex something like:
formText.replace(/(<form\b[^>]*>)[^<>]*(<\/form>)/gi, "");
but I'm not sure how to reference the specific form with class=form2.
There's also a problem with it being a multi-line string.
Update: added more detail, outlining why jQuery's remove() method isn't working. jQuery only thinks there's one form unfortunately.

Don't use regex to parse HTML. Since you're using jQuery, just use .remove():
$(function() {
$(".form2").remove();
});
JSFiddle

I ended up using:
formText = formText.replace(/(<form\b[^>]*form2+.*>[\s\S]+<\/form>)/gi, "");
The [\s\S] matches all characters including \n and \r to cover the newlines.
I could probably have made the part of the regex dealing with the class name more specific so I knew it was the class and not some other random form with a similar, but in practice it didn't matter (there was only one instance of the 2nd form, with a very specific class name).

Why do Arabic characters behave as separate characters when styling single Arabic character?

Basically what I am trying to accomplish is Arabic characters misuse highlighter !
To make it easy for understand I will try to explain a similar functionality but for English.
Imagine a string with wrong capitalization, and it is required to rewrite it correctly, so the user rewrites the string in an input box and submits, the js checks to see if any char wasn't corrected then it displays the whole string with those letter corrected and highlighted in red;
i.e. [test ] becomes [Test ]
To do so, I was checking those chars, and if faulty char was detected it get surrounded with span to be colored in red.
So far so good,
now when I try to replicate this for Arabic language the faulty char gets separated from the word making it unreadable.
Demo: jsfiddle
function check1() {
englishanswer.innerHTML = englishWord.value.replace(/t/, '<span style="color:red">T</span>');
}
function check2() {
arabicanswer.innerHTML =
arabicWord.value.replace(/\u0647/, '<span style="color:red">' +
unescape("%u0629") + '</span>') +
'<br>' + arabicWord.value.replace(/\u0647/, unescape('%u0629'));
}
fieldset {
border: 2px groove threedface;
border-image: initial;
width: 75%;
}
input {
padding: 5px;
margin: 5px;
font-size: 1.25em;
}
p {
padding: 5px;
font-size: 2em;
}
<fieldset>
<legend>English:</legend>
<input id='englishWord' value='test' />
<input type='submit' value='Check' onclick='check1()' />
<p id='englishanswer'></p>
</fieldset>
<fieldset style="direction:rtl">
<legend>عربي</legend>
<input id='arabicWord' value='بطله' />
<input type='submit' value='Check' onclick='check2()' />
<p id='arabicanswer'></p>
</fieldset>
Notice when testing the Arabic word, the spanned char [first preview] is separated from the rest of the word, while the non-spanned char [second preview] appears normally.
Edit: Preview for the problem [Chrome UA]

This is a longstanding bug in WebKit browsers (Chrome, Safari): HTML markup breaks joining behavior. Explicit use of ZWJ (zero-width joiner) used to help (see question Partially colored Arabic word in HTML), but it seems that the bug has become worse.
As a clumsy (but probably the only) workaround, you could use contextual forms for Arabic letters. This can be tested first using just static HTML markup and CSS, e.g.
بطﻠ<span style="color:red">ﺔ</span>
Here I am using, inside the span element, ﺔ U+FE94 ARABIC LETTER TEH MARBUTA FINAL FORM instead of the normal U+0629 ARABIC LETTER TEH MARBUTA and ﻠ U+FEE0 ARABIC LETTER LAM MEDIAL FORM instead of U+0644 ARABIC LETTER LAM.
To implement this in JavaScript, you would need, when inserting markup into a word Arabic letters, change characters before and after the break (caused by markup) to initial, medial, or final representation form according to its position in the word.

i know that this solution i'm giving you is not very elegant but it kinda works so tell me what you think:
<script>
function check1(){
englishanswer.innerHTML = englishWord.value.replace(/t/,'<span style="color:red">T</span>');
}
function check2(){
arabicanswer.innerHTML =
arabicWord.value.replace(/\u0647/,'<span style="color:red">'+
unescape("%u0640%u0629")+'</span>')+
'<br>'+arabicWord.value.replace(/\u0647/,unescape('%u0629'));
}
</script>
<fieldset>
<legend>English:</legend>
<input id='englishWord' value='test'/>
<input type='submit' value='Check' onclick='check1()'/>
<p id='englishanswer'></p>
</fieldset>
<fieldset style="direction:rtl">
<legend>عربي</legend>
<input id='arabicWord' value='بطلـه'/>
<input type='submit' value='Check' onclick='check2()'/>
<p id='arabicanswer'></p>
</fieldset>

You should take care of Beginning , Middle, End and Isolated characters. The complete list is available here
Use ufe94 instead of u0629
arabicWord.value.replace(/\u0647/,'<span style="color:red">'+ unescape("%ufe94")+'</span>')+

As Jukka K. Korpela indicated, This is mostly a bug in most WebKit-based browsers(chrome, safari, etc).
A simple hack other than the TAMDEED char or getting contextual forms for Arabic letters would be to put the zero-width-joiner (‍ or ‍) before/after the letter you want to be treated as single Arabic ligature - two chars making up another one. e.g.
<p>عرب‍<span style="color: Red;">‍ي</span></p>
demo: jsfiddle
see also the webkit bug report.

instead of using span, use HTML5 ruby element and add the Arabic-tatweel character "ـ" (U+0640), you know the character that extends letters (shift+j).
so your code becomes:
arabicanswer.innerHTML =
(arabicWord.value).replace(/\u0647/,'ـ<ruby style="color:red"> ـ'+
unescape("%u0629")+'</ruby>')+
'<br>'+arabicWord.value.replace(/\u0647/,unescape('%u0629'));
}
and here is an updated fiddle: http://jsfiddle.net/fjz5C/28/

I would try adding a ligature/taweel to the character before and after. It won't actually fix the problem, but it will make it difficult to notice, since it will force the lam into medial form and the taa marbuta into final form. If it works, that would be a lot less brittle than actually converting the letters to their medial or final forms.
You seem to have other problems, though. I went to your website and put in a misspelling of hadha , just to see what it would do with it, and it caused the ha to disconnect in both words, which doesn't make sense if the only problem is the formatting tags. (I'm using Firefox on a Mac.)
Good luck!

RegEx in javascript. Allow only letters, comma and punctuation

I try to make a RegEx for validating a form in javascript. The RegEx should only allow letters comma and punctuation. For instance I have this string:
Hi, this is a test of RegEx. Does it work
I've tried the following
/^[A-Za-z0-9,. ]{3,50}$/;
But it doesn't seems to work. Solutions?
Thanks!
EDIT:
This is my code:
<script type="text/javascript">
var RE_SSN = /^[A-Za-z0-9,. ]{3,50}$/;
function checkSsn(ssn){
if (RE_SSN.test(ssn)) {
alert("OK");
javascript:addAppointment(document.forms[0])
} else {
alert("NO!");
}
}
</script>
<div id="r">
<label for="receipt">Receipt</label><input type="checkbox" name="receipt" value="1"/>
</div>
<input type="button" value="Post it" onclick="checkSsn(this.form.content.value);"/>

You might need to escape the "." as that is a special character in regex.
/^[A-Za-z0-9,\. ]{3,50}$/;
Actually probably not. Try using http://www.regextester.com/ - I was able to get it to work anyway. Can you show us the full code for how you're implementing this?

if you want no punctuation at the beginning of the field:
/^[a-zA-Z]+(([\'\,\.\- ][a-zA-Z ])?[a-zA-Z]*)*$/
this also allows spaces (one scenario for this is last name - De La Hoya, or O'Doul)

Restrict characters entered into a text_field

I have a text field where users enter a URL string, which cannot contain spaces or non-alphanumeric characters (if that's an accurate way of putting it).
Is there a way in Rails to restrict entry into the text_field itself so that spaces and characters like /":}{#$^# can be avoided?
Thanks a lot.
To clarify, the only characters that should be possible are letters and numbers.

The problem here is that URL strings can have slashes (/) and hash marks (#). So your regex is going to be quite complex to ensure the right portion of the field is filtered properly. But for plain character filtering, you can use simple regex to remove any non alpha-numeric characters.
Not sure about anything ruby-specific, but in straight javascript:
<html>
<body>
<form>
<input type="text" name="whatever" id="form-field" value="" />
</form>
</body>
<script type="text/javascript">
var oFormField = document.getElementById('form-field');
oFormField.onkeyup = function() {
oFormField.value = oFormField.value.replace(/[^a-zA-Z0-9]/, '');
}
</script>
</html>

You may use jQuery Tools Validator that uses HTML 5 tags to validate your forms.
This is a great way to validate your forms in an Unobscursive way without putting JS all over your forms :-).
Look at the "pattern" HTML 5 tag that allows you to validate a field against a Regexp.
http://flowplayer.org/tools/validator/index.html

How can I use a multiline value for an HTML tag attribute? (i.e. how do I escape newline?)

How do I include a newline in an HTML tag attribute?
For example:
<a href="somepage.html" onclick="javascript: foo('This is a multiline string.
This is the part after the newline.')">some link</a>
Edit: Sorry, bad example, what if the tag happened to not be in javascript, say:
<sometag someattr="This is a multiline string.
This is the part after the newline." />
Edit 2: Turns out the newline in the string wasn't my problem, it was the javascript function I was calling. FWIW, "
" can be used for newline in an HTML attribute.

From what I remember about the HTML standard, character entities work in attributes, so this might work:
<sometag someattr="This is a multiline string.
This is the part after the newline." />
I'm not sure if the "newline" you want ought to be
(\n) or
(\r\n), and I'm not sure if browsers will interpret it the way you want.
Why do you need it? What specific problem are you trying to solve by adding a newline in an HTML tag attribute?

To include a multiline value, just continue the text of the html attribute on the next line in your editor e.g.
<input type="submit" value="hallo
hallo">
will put the second hallo under the first

As a general rule newlines in attributes are preserved so your second example would work fine. Did you try it? Can you give a specific example where you are having problems with it?
As test take a look at this:-
<a href="somepage3.html" onclick="javascript: alert(this.getAttribute('thing'))" thing="This is a multiline string.
This is the part after the newline.">some link</a>
The alert include the newline in the attribute.

<a href="somepage.html" onclick="javascript: foo('This is a multiline string. \
This is the part after the newline.')">some link</a>
Javascript needs a backslash at the end of the new line in a string.

i'm not certain, but you can try \r or \n
javascript: foo('This is a multiline string.\rThis is the part after the newline.')
or
javascript: foo('This is a multiline string.\nThis is the part after the newline.')

Usually, line breaks in HTML source code display what you intended in the result.
(Depends on the editor of course)

Since it's in Javascript, you would use "\n" if inside double-quotes (not positive about single-quotes, I've been in PHP a lot lately.
Honestly, it's worth mentioning that you should use Events and a delegator instead of placing a javascript event directly on the element.