Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to set the type of quotation marks for embedded quotations with JavaScript?
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 <q> 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 entity numbers. 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 require 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 from 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 = "'«' '»'"
q2.style.quotes = "'`' '`' '<' '>'"
}
</script>
</body>
</html>
Output: When you click the button, the quotation marks will change from default double quotes to the specified custom marks.
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 "setQuotation()" 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" placeholder="e.g. '<' '>'">
<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 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;
if (quotation_type) {
q.style.setProperty('quotes', quotation_type);
}
}
</script>
</body>
</html>
Output: Enter custom quotation marks like "'<' '>'" and click the button to see the quotes change accordingly.
Comparison of Methods
| Method | Direct Assignment | Flexibility | Best Use Case |
|---|---|---|---|
quotes property |
Yes | Simple | Static quotation marks |
setProperty() method |
No | High | Dynamic quotation marks |
Conclusion
JavaScript provides two effective methods to customize quotation marks: the direct quotes property and the flexible setProperty() method. Choose based on whether you need static or dynamic quotation mark changes.
593 Views
