Blog: Strip tags with Javascript
Page: prev. | 1 | next
If, like me, you find you prefer to roll your own HTML markup then you may find occassion where you need to strip markup from text.
For sure, this is easy enough with server-side PHP’s strip_tags (php.net) function but there is no in-built client-side functionality with Javascript, but one is simple enough to implement.
Breakdown
- <form>
- <h1>Strip Tags</h1>
- <textarea id="stringToStrip" rows="4" cols="45">Paste text here from which to strip HTML, XML, and PHP tags…</textarea>
- <br />
- Allow tags: <input id="allowed" type="text" value="<tagtype1><tagtype2>" />
- <br />
- <input id="lowercase" type="checkbox" value="lowercase" />Make lowercase <input id="replacewhitespace" type="checkbox" value="replacewhitespace" />Replace whitespace with hyphen (-)
- <input type="button" value="Strip Tags" onclick="transformText();">
- </form>
The HTML form does not “submit” rather the input button just calls a defined Javascript function, transformText() to transform the textarea element’s content.
- <script type="text/javascript">
- function transformText() {
- stringToStrip = document.getElementById('stringToStrip');
- transformedText = stringToStrip.value;
- lowercase = document.getElementById('lowercase');
- if(lowercase.checked === true) {
- transformedText = transformedText.toLowerCase();
- }
- if(replacewhitespace.checked === true) {
- transformedText.trim(); //Remove whitespace from both sides of a string
- transformedText = transformedText.replace(/ +(?= )/g,''); //Replace muliple spaces with a single space
- transformedText = transformedText.replace(/\s/gi,'-'); //Replace whitespace with a hyphen (matches single white space character, including space, tab, form feed, line feed)
- }
- allowedTags = document.getElementById('allowed');
- if(allowedTags.value != '<tagtype1><tagtype2>' || allowedTags.value != '') {
- stringToStrip.value = strip_tags(transformedText,allowedTags.value);
- }else {
- stringToStrip.value = strip_tags(transformedText);
- }
- }
- function strip_tags(input, allowed) {
- /* Strips HTML tags from string. JS equiv. of php strip_tags.
- Arguments:
- input - string
- allowed - tags to allow (e.g. <strong><em>)
- */
- allowed = (((allowed || '') + '')
- .toLowerCase()
- .match(/<[a-z][a-z0-9]*>/g) || [])
- .join(''); // making sure the allowed arg is a string containing only tags in lowercase (<a><b><c>)
- var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,
- commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi;
- return input.replace(commentsAndPhpTags, '')
- .replace(tags, function($0, $1) {
- return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';
- });
- }
- </script>
The transformText() function converts the text to lowercase and replaces whitespace if checkboxes are set but relies on another defined function strip_tags(input, allowed) replicating the functionality of the PHP version to accomplish the removal of tags.
If you need use of such you can use online but with Javascript being a client-side script it’s simply enough to create a page with the a form and the script included to run run locally when the page is loaded.
Related entries
- What language? Detecting preferred language via browser
- Page jumps with internal links
- HTML5Shiv for HTML5 support for IE < 9
- Resize an image proportionally with Javascript
- Disabling the right-click menu for an image
- Adding a Javascript Event Listener
- Javascript witchery: Passing parameters between pages with query string
- Resizing browser with JavaScript to test site display at different screen Dimensions
Page: prev. | 1 | next