check the length of a string as it appears in html format

[lucidtech]

I have a member site where users can have custom display names. A lot of users like to put symbols like hearts via html formatting and I'm fine with that. The problem is I have to keep display names to a length of 15 characters when displayed on the page... when a user puts in a heart symbol it takes quite a few of those characters up, even though when it's displayed the symbol only takes one character. Is there a way for me to check the length of the display name as it would appear on the page and not the length of it in an unencoded format?

 

[LyndonOHRC]

symbols like hearts via html formatting"

Do you mean HTML like the <img> tag?

Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey

 

[lucidtech]

no, like typing in an '&' and then hearts and then a ';' that counts as 8 characters but only displays as one

 

[750GSXR]

emoticons in the display name i guess is what he is talking about.

do you have a list of approved emoticons available.

 

[lucidtech]

& a m p ; without spaces becomes an & symbol, & h e a r t s ; becomes a heart, it's not an emoticon, it's an html character

 

[LyndonOHRC]

Loop across the user id string and count the occurances of & a m p. display Length is Len of string-(special char count times 8).

On my phone just now, will provide example if u need later.

Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey

 

[lucidtech]

That's what I was hoping I didn't need to do Lyndon. Thanks for the offer but I can code an CFC to do this.

 

[LyndonOHRC]

That's all I can think of on the server side.

You could print the string in a hidden div and get the innerHTML.length with javascript. But, of course, that method requires the client to be javascript capable.

Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey

 

[lucidtech]

That's a great idea Lyndon, thanks. Just wrote a simple test script and it works perfectly.. I check the display name against a bad word filter via ajax when the form is submitted anyway, so this is great. I've posted a very dumbed down version of the function below in case anyone comes across this in the future.


<script>
function checkLen() {
//set the div's html to the input's value
document.getElementById("test2").innerHTML = document.test.check.value;
// set a variable to the length of the divs innerhtml
var k = document.getElementById("test2").innerHTML.length;
//display the length of the innerhtml
alert(k);
}
</script>
<!--- simple form for entering a display name --->
<cfform name="test" action="">
<cfinput name="check" value="">
</cfform>
<!--- div set to hold the innerhtml value of what is entered into the input ---->
<div id="test2">&hearts;&hearts;</div><br /><br />
<!--- link to call the javascript function ---->
<a href="javascript:checkLen();">Check Length</a>

 

[LyndonOHRC]

Very nice...

Just for my curiosity, what was the reason you needed the display length?

Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey

 

[lucidtech]

If you mean why I put an alert in the script, that was just to test. The reason I needed to get this setup at all is I want to limit the length of display names as they are displayed rather than how many characters they contain.. so if someone want's to add &hearts; to their display name, they can still add 14 more characters after that

 

[LyndonOHRC]

For validation, I see. Did it work when div display=none?

Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey

 

[lucidtech]

yes it does