How to set the type of quotation marks for embedded quotations with JavaScript?

Javascript Web Development Front End Technology

In this tutorial, we will learn how to set the type of quotation marks for embedded quotations with JavaScript.

The types of quotation marks can be changed using JavaScript. For example, if a sentence is in double quotes(“”), it can be modified to single quotes(‘’). To set the quotation, use the element. With that, add the type of quotation marks with the quotes property.

Using the quotes property to set the type of quotation marks

In JavaScript, the quotes property is used to set the type of quotation marks for embedded quotations. The quotation marks can be set using the quote characters or the HTML entry number. The first level of quotations, as well as the second level of the quotations, can also be set using this property. It is a part of the element object’s style property, so we also required the document.getElementById() method to access the element object.

Syntax

document.getElementById('id').style.quotes = string string string string | none | inherit | initial

In the above syntax, we use the quotes property to set the type of quotation marks for embedded quotations. The document.getElementById() method accesses the element object of an element that has the id as ‘id’.

Parameters

string string string string − It specifies the quotation marks. The first two strings are used for the first level of quotations, and the last two strings are used for the second level of quotations.
none − It specifies no quotation marks.
inherit − The quotation marks are inherited by their parent element.
initial − The quotation marks are set to default.

Example

In the below example, we set the type of quotation marks for multiple quotations with a button click. The button “Set Quotation Type” is associated with a click event that triggers the function “setQuotation()” whenever the user clicks on the button.


<html>
<head>
   <style>
      .item {
         padding: 15px;
         margin-top: 5px;
         background-color: aliceblue;
         border: 1px solid black;
      }
   </style>
</head>
<body>
   <h2> Set the type of quotation marks for embedded quotations using the <i> quotes property </i> with JavaScript </h2>
   <button onclick="setQuotation()"> Set Quotation Type </button>
   <div class="item">
      <q id="q1"> Hello World! </q>
   </div>
   <div class="item">
      <q id="q2"> Welcome <q> User </q> to Tutorialspoint </q>
   </div>
   <script>
      
      // "Set Quotation Type" button click event handler function
      function setQuotation() {
         const q1 = document.getElementById("q1")
         const q2 = document.getElementById("q2")
         q1.style.quotes = "'\253' '\273'"
         q2.style.quotes = "'`' '`' '<' '>'"
      }
   </script>
</body>
</html>

Using the setProperty method to set the type of quotation marks

The setProperty method in JavaScript is used to set any new or existing property of an element. This method is available in the style property of the element object of an element. It takes the property name and value in the arguments and sets that property with the value provided. For example, to set the type of quotation marks for embedded quotations, the setProperty method takes ‘quotes’ as the first argument, and in the second argument, it takes the value.

Syntax

document.getElementById('id').style.setProperty(name, value, priority)

In the above syntax, the document.getElementById() method returns the element object of an element so that we can execute the setProperty method on it.

Parameters

name − The name of the property.
value − The property value.
priority − The priority of the property value (optional).

Example

In the below example, we have set the type of quotation marks for embedded quotations with JavaScript using the setProperty method. The users can put their input in the input field. A button “Set Quotation Type” is used that executes the “setQuotationType()” function on the click event and sets the quotation marks as per the user input.


<html>
<body>
   <h2> Set the type of quotation marks for embedded quotations using the <i> setProperty method </i> with JavaScript </h2>
   <h4> Enter the type of quotation marks: </h4>
   <input type="text" id="quotation-type" name="quotation-type">
   <button onclick="setQuotation()"> Set Quotation Type </button>
   <div style="padding: 15px; margin-top: 5px; background-color: aliceblue; border: 1px solid black;">
      <q id="q"> Welcome <q> User </q> to Tutorialspoint</q>
   </div>
   <p> Note : Please enter the type of quotation mark with double quotes such as ("< " ">") </p>
   <script>
      
      // 'Set Quotation Type' button click event handler function
      function setQuotation() {
         const q = document.getElementById('q')
         
         // user input value for quotation marks
         const quotation_type = document.getElementById('quotation-type').value;
         q.style.setProperty('quotes', quotation_type);
      }
   </script>
</body>
</html>

In this tutorial, we have learned how to set the type of quotation marks for embedded quotations with JavaScript. We have also learned how to take user input values and set quotation marks. In addition, we learned the quotes property and the setProperty method. Users can follow any of these as per their requirements.