JavaScript String strike() Method: Creating Strikethrough Text
The JavaScript strike() method is used to create a string with a strikethrough effect, meaning the text will have a horizontal line running through it. This method returns an HTML <s> element containing the original string. While it’s simple to use, it’s important to understand its purpose and how it fits into modern web development practices.
Definition and Purpose
The strike() method wraps a string with the HTML <s> tag, which is used to indicate that the text is no longer accurate or relevant. In visual terms, this means a horizontal line will be drawn through the text.
Syntax
string.strike()
Return Value
- A string containing the original string wrapped in an HTML
<s>element.
Examples
Basic Usage
The following example demonstrates how to use the strike() method to create a strikethrough text:
let str = "Incorrect Price";
let strikedStr = str.strike();
console.log(strikedStr);
Output:
<s>Incorrect Price</s>
Using strike() with HTML
To render the strikethrough text in an HTML document, you can assign the result to an element’s innerHTML property:
<!DOCTYPE html>
<html>
<head>
<title>strike() Example</title>
</head>
<body>
<p id="strikeDemo"></p>
<script>
let str_example_one = "Outdated Information";
let strikedStr_example_one = str_example_one.strike();
document.getElementById("strikeDemo").innerHTML = strikedStr_example_one;
</script>
</body>
</html>
Output:
Outdated Information
Combining with Other String Methods
You can combine the strike() method with other string methods to create more complex text manipulations:
let str_combine = "Wrong! ".strike() + "Corrected Text";
console.log(str_combine);
Output:
<s>Wrong! </s>Corrected Text
Dynamic Strikethrough Text
The strike() method can be used to dynamically update content on a webpage based on user interactions or data changes:
<!DOCTYPE html>
<html>
<head>
<title>Dynamic strike() Example</title>
</head>
<body>
<button id="strikeButton">Strike Text</button>
<p id="dynamicStrike"></p>
<script>
let originalText = "Pending";
let isStriked = false;
let dynamicStrike_element = document.getElementById("dynamicStrike");
dynamicStrike_element.innerHTML = originalText;
document.getElementById("strikeButton").addEventListener("click", function() {
if (!isStriked) {
dynamicStrike_element.innerHTML = originalText.strike();
isStriked = true;
} else {
dynamicStrike_element.innerHTML = originalText;
isStriked = false;
}
});
</script>
</body>
</html>
When you click the button, the text “Pending” will be struck through, and clicking again will remove the strikethrough.
Striking Through Part of a String
To strike through only a specific part of a string, you can combine strike() with other string methods like substring() or template literals:
let fullText = "Regular Text Erroneous Part More Text";
let start = fullText.indexOf("Erroneous");
let end = start + "Erroneous".length;
let struckText =
fullText.substring(0, start) +
fullText.substring(start, end).strike() +
fullText.substring(end);
console.log(struckText);
Output:
Regular Text <s>Erroneous</s> Part More Text
Modern Alternatives to strike()
While the strike() method is straightforward, it’s considered outdated. Modern web development practices favor using CSS to style text. The text-decoration property with a value of line-through provides the same visual effect and is more flexible and semantic.
Here’s how you can achieve the same result using CSS:
<!DOCTYPE html>
<html>
<head>
<title>CSS strikethrough Example</title>
<style>
.strikethrough {
text-decoration: line-through;
}
</style>
</head>
<body>
<p class="strikethrough">Alternative Method</p>
</body>
</html>
Output:
Alternative Method
When to Use strike()
Despite being less favored in modern development, strike() can still be useful in legacy codebases or quick, non-critical applications where backward compatibility is a concern. However, for new projects, it’s recommended to use CSS for styling.
Conclusion
The JavaScript strike() method offers a simple way to create strikethrough text by wrapping it in an HTML <s> tag. While it’s easy to use, modern web development favors CSS styling for better control and separation of concerns. Understanding strike() can be helpful for maintaining older code, but for new projects, CSS text-decoration: line-through; is the recommended approach.
