2,443 reads

How to Add Prefix or Suffix to Each New Line in JavaScript

by Vinish KapoorMarch 30th, 2023

Too Long; Didn't Read

Learn how to add a prefix or suffix to each new line in JavaScript with our step-by-step tutorial. Create a user-friendly online tool using HTML, CSS, and JavaScript to simplify text formatting tasks.

featured image - How to Add Prefix or Suffix to Each New Line in JavaScript

When working with text in JavaScript, you may come across situations where you need to add a prefix or suffix to each new line in a given text. In this tutorial, we'll walk you through a simple and effective way to achieve this using HTML, CSS, and JavaScript.

We'll create an easy-to-use online tool that adds a specified prefix and suffix to each new line of text entered by the user.

Step 1: Create the HTML Structure

First, let's create the basic HTML structure for our tool. This includes a text area for inputting the text, two input fields for the prefix and suffix, a button to trigger the JavaScript function, and an output text area to display the processed text.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Add Prefix and Suffix</title>
</head>
<body>
    <h1>Add Prefix and Suffix to Each New Line</h1>
    <textarea id="inputText" rows="10" cols="50" placeholder="Enter your text here..."></textarea>
    <br>
    <label for="prefix">Prefix:</label>
    <input type="text" id="prefix" />
    <br>
    <label for="suffix">Suffix:</label>
    <input type="text" id="suffix" />
    <br>
    <button onclick="addPrefixAndSuffix()">Add Prefix and Suffix</button>
    <br>
    <h2>Output:</h2>
    <textarea id="outputText" rows="10" cols="50" readonly></textarea>
</body>
</html>

Step 2: Add CSS for Styling

Although not required, you may want to add some basic CSS to style the tool. Here's a simple example:

<style>
    body {
        font-family: Arial, sans-serif;
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
    }

    textarea, input {
        display: block;
        width: 100%;
        margin-bottom: 10px;
    }

    button {
        background-color: #4CAF50;
        color: white;
        padding: 8px 16px;
        border: none;
        cursor: pointer;
        text-decoration: none;
    }

    button:hover {
        background-color: #45a049;
    }
</style>

Add the above CSS code inside the <head> tag of the HTML code to apply the styles.

Step 3: Write the JavaScript Function

Now, let's write the JavaScript function that will add the specified prefix and suffix to each new line of the input text. Be sure to include this code within <script> tags at the end of your HTML file, just before the closing </body> tag.

function addPrefixAndSuffix() {
    const inputText = document.getElementById('inputText').value;
    const prefix = document.getElementById('prefix').value;
    const suffix = document.getElementById('suffix').value;
    const lines = inputText.split('\n');

    const outputLines = lines.map(line => {
        if (line.trim() === '') {
            return line;
        }
        return prefix + line + suffix;
    });

    const outputText = outputLines.join('\n');
    document.getElementById('outputText').value = outputText;
}

This function retrieves the input text, prefix, and suffix from the HTML elements. It then splits the input text into an array of lines, processes each line by adding the prefix and suffix (skipping empty or whitespace-only lines), and finally combines the processed lines back into a single string.

Step 4: Test the Tool

To test the tool, save the HTML, CSS, and JavaScript code in a new .html file and open it in your web browser. You should see a simple interface with input fields for the text, prefix, and suffix, as well as a button to trigger the function.

Enter your text in the text area, input your desired prefix and suffix, and click the "Add Prefix and Suffix" button. The processed text with the added prefix and suffix should appear in the output text area.

Conclusion

In this tutorial, we have demonstrated how to create a user-friendly online tool that adds a prefix and suffix to each new line of text using HTML, CSS, and JavaScript. This tool can be helpful for tasks such as formatting lists, adding code snippets, or enhancing the appearance of your text.

With this simple yet effective solution, you can save time and effort when working with text in JavaScript.