HTML and CSS Reference
In-Depth Information
function checkWords() {
var inputText = document.getElementById('textArea').value;
var outputText = document.getElementById('conditionedText');
for (var i=0; i < keyWords.length; i++) {
var rg = new RegExp(keyWords[i]+' ',"ig");
inputText = inputText.replace(rg,replaceChars('*',keyWords[i].length)+' ');
}
outputText.textContent = inputText;
}
</script>
</head>
<body>
<textarea id="textArea" rows="5" cols="13">
This chapter is dagnabit amazing!
</textarea>
<button onclick="checkWords()">Submit!</button>
<div id="conditionedText"></div>
</body>
</html>
So sweet of you to say! As you can see, you can add as many words as you'd like to the
keyWords
array, and you
can feel free to use the words that make the most sense to you. It also may be a better idea externalizing the words in a
JSON file so updates can be made easily without digging into the core script files. This could also be used using what
we've learned in chapter 6 with Web Workers.
Another way to condition data is the “new to HTML5”
ellipsis
text property of CSS. If you're unsure about the
number of words that are coming back in a web service, you can set the width and height values of the text area and
set the copy inside of it to
overflow: ellipsis
. Take a look at Listing 11-4.
Listing 11-4.
Overflow Ellipsis Example
<html>
<head>
</head>
<body>
<div id="textArea">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
<style type="text/css">
#textArea {
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
