• We just launched and are currently in beta. Join us as we build and grow the community.

How to Remove Punctuation in a Phrase in JavaScript

KanyeW

Programmer Extraordinaire
Divine
K Rep
0
0
0
Rep
0
K Vouches
0
0
0
Vouches
0
Posts
150
Likes
175
Bits
2 MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1 300 XP
Introduction

In this tutorial we will create a How to Remove Punctuation in a Phrase in JavaScript. This tutorial purpose is to provide you a technique to remove punctuation in a phrase. This will tackle the removing of punctuation in a phrase dynamically. I will provide a sample program to show the actual coding of this tutorial.

This tutorial is easy to understand just follow the instruction I provided and you will do it without a problem. This program is useful if you want to remove any special characters in a whole paragraph. I will give my best to give you the easiest way of creating this program How to Remove Punctuation in a Phrase. So let's do the coding.

Before we get started:

This is the link for the template that i used for the layout design https://getbootstrap.com/.

Creating The Interface

This is where we will create a simple interface for our application. This code will display an interface that will a short phrase. To create this simply copy and write it into your text editor, then save it as index.html.
  1. <!DOCTYPE html>
  2. <html

    lang

    =

    "en"

    >
  3. <head

    >
  4. <meta

    charset

    =

    "UTF-8"

    /

    >
  5. <link

    rel

    =

    "stylesheet"

    type

    =

    "text/css"

    href

    =

    "css/bootstrap.css"

    /

    >
  6. <style

    >
  7. blockquote {
  8. background: #f9f9f9;
  9. border-left: 10px solid #ccc;
  10. margin: 1.5em 10px;
  11. padding: 0.5em 10px;
  12. quotes: "\201C""\201D""\2018""\2019";
  13. }
  14. blockquote:before {
  15. color: #ccc;
  16. content: open-quote;
  17. font-size: 4em;
  18. line-height: 0.1em;
  19. margin-right: 0.25em;
  20. vertical-align: -0.4em;
  21. }
  22. blockquote p {
  23. display: inline;
  24. }
  25. </

    style

    >
  26. </

    head

    >
  27. <body

    >
  28. <nav

    class

    =

    "navbar navbar-default"

    >
  29. <div

    class

    =

    "container-fluid"

    >
  30. <a

    class

    =

    "navbar-brand"

    href

    =

    "https://www.sourcecodester.com"

    >

    Sourcecodester</

    a

    >
  31. </

    div

    >
  32. </

    nav

    >
  33. <div

    class

    =

    "container-fluid"

    >
  34. <div

    class

    =

    "row"

    >
  35. <div

    class

    =

    "col-md-3"

    ></

    div

    >
  36. <div

    class

    =

    "col-md-6 well"

    >
  37. <h3

    class

    =

    "text-primary"

    >

    How to Remove Punctuation in a Phrase</

    h3

    >
  38. <hr

    style

    =

    "border-top: 1px SOLID #8c8b8b;"

    /

    >

  39. <blockquote

    id

    =

    "text"

    >

    One happy customer wrote: "This is the best program-- that I have ever seen!"</

    blockquote

    >
  40. <button

    onclick

    =

    "rem();"

    >

    Remove Punctuation</

    button

    >

    <button

    onclick

    =

    "reset();"

    >

    Reset</

    button

    >
  41. </

    div

    >
  42. </

    div

    >
  43. </

    div

    >
  44. </

    body

    >
  45. <script

    src

    =

    "script.js"

    ></

    script

    >
  46. </

    html

    >

Creating JavaScript Function

This is where the main function of the application is. This code will dynamically remove the punctuation within a phrase To do this just copy and write these block of codes inside the text editor and save it as script.js.
  1. function

    rem(

    )

    {
  2. const

    text=

    document.getElementById

    (

    "text"

    )

    .innerHTML

    ;


  3. const

    remPunc =

    text.replace

    (

    /[.,\/#!$%"\^&\*;:{}=\-_`~()]/g

    ,

    ""

    )

    .replace

    (

    /\s{2,}/g

    ,

    " "

    )

    ;

  4. document.getElementById

    (

    "text"

    )

    .innerHTML

    =

    remPunc;

  5. }

  6. function

    reset(

    )

    {
  7. window.location

    =

    "index.html"

    ;
  8. }

In this code we display a simple phrase using the html tag blockqoute and bind it an id called text. We create a method to enclose multiple functions, we then get the value text id. We use the replace function to remove any characters base on the given argument, in my case we only targeted special characters with the use of the regex.

Output:

How%20to%20Remove%20Punctuation%20in%20a%20Phrase%20in%20JavaScript%201.png


The How to Remove Punctuation in a Phrase in JavaScript source code that I provide can be download below. Please kindly click the download button.

There you have it we successfully created How to Remove Punctuation in a Phrase in JavaScript. I hope that this simple tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding!

More Tutorials for JavaScript Language

JavaScript Tutorials


Download
You must upgrade your account or reply in the thread to view the hidden content.
 

452,292

324,186

324,194

Top