Strikethrough text using JavaScript

In this article, we have explained how to Strikethrough text using JavaScript. This involves using the del tags in HTML and an ASCII character for strikethrough.

There are two ways to strikethrough text using JavaScript:

Use HTML tag <del>
Use ASCII character for strikethrough

Let us get started with Strikethrough text using JavaScript.

Use HTML tag `<del>`

In HTML, of we wrap a text using del tags, then the text is crossed out (strike-through).

This is <del>NOT</del> OpenGenus.

Output:

This is ~~NOT~~ OpenGenus.

Hence, to strikethrough any text, we can wrap the text around del tags in HTML

Following JavaScript code takes the text input from a textarea and wraps it around del tag and places the updated text in another textarea. The output text is strikethrough version of the input text.

<script type="text/javascript">
      function strike(text) {
        var result = "<del>" + text + "</del>";
        return result;
      }

      function strike_text() {
        var text = $("#input").val();
        $("#output").html(strike(text));
      }
</script>

The corresponding HTML code has 2 textarea where one holds the input and other is for output (wrapped around del tag) generated using the JavaScript code:

<h1>Strikethrough Text</h1>
<h2>Input<h2>
<textarea id=input placeholder="Enter your text here"></textarea>
<h2>Output<h2>
<h3>Strikeout text</h3>
<textarea id=output></textarea>

Use ASCII character for strikethrough

You can use the ASCII character "\u0336" for strikethrough effect. Place this ASCII character before every character where strikethrough effect is needed.

The advantage of this technique is that if you copy the strikethrough text, the strikethrough effect is also copied in the clipboard. Hence, you can paste it anywhere. This is not possible in other techniques.

Following is the JavaScript code that takes a string and addes the ASCII character before each character of the input string.

<script type="text/javascript">
      function strike(text) {
        var result = "";
        $.each(text.split(""), function () {
          result = result + "\u0336" + this;
        });
        return result;
      }

      function strike_text() {
        var text = $("#input").val();
        $("#output").html(strike(text));
      }
</script>

Following is the corresponding HTML code where there are two textareas input and output.

<h1>Strikethrough Text</h1>
<h2>Input<h2>
<textarea id=input placeholder="Enter your text here"></textarea>
<h2>Output<h2>
<h3>Strikeout text</h3>
<textarea id=output></textarea>

Try this Strikethrough tool which generates text with strikeout in plain text which you can copy and paste anywhere. Note that you cannot copy the strikeout in HTML directly but can be done using the tool.

With this article at OpenGenus, you must have the complete idea of how to strikethrough a text in HTML page using JavaScript.

Use HTML tag <del>

Use ASCII character for strikethrough

Use HTML tag `<del>`