Using replace function in javascript

Question

So I have the following in my page which is a textarea with some text in it:

and what i want to do now is to replace the BR in the text with newline \r such that i would get the following displayed in the textarea:

Hi
I
Am
Jake

Here's what I tried so far:

console.log(document.getElementById("sample").value);
document.getElementById("sample").value = document.getElementById("sample").value.replace("<BR>","\n");

html, body {
    height: 100%;
}

textarea {
    resize: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel = "stylesheet" href = "style.css">
    <title>Document</title>
</head>
<body>
    <div id = "outer">
        <textarea id="sample">Hi<BR>I<BR>Am<BR>Jake</textarea>
    </div>

    <script src="test.js"></script>
</body>
</html>

However, it doesn't seem to be displaying properly. Would appreciate some help on this.

Matthew · Accepted Answer · 2020-11-18 05:39:58Z

1

Use replaceAll() instead of replace(). The replace function will replace only the first match, replaceAll() will replace all the occurrences in the given string.

I also suggest escaped strings in the replace parameters. Add backslash (\) in your < > characters.

console.log(document.getElementById("sample").value);
document.getElementById("sample").value = document.getElementById("sample").value.replaceAll("\<BR\>","\n");

html, body {
    height: 100%;
}

textarea {
    resize: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel = "stylesheet" href = "style.css">
    <title>Document</title>
</head>
<body>
    <div id = "outer">
        <textarea id="sample">Hi<BR>I<BR>Am<BR>Jake</textarea>
    </div>

    <script src="test.js"></script>
</body>
</html>

edited Nov 18, 2020 at 5:39

Matthew

1,8551 gold badge17 silver badges21 bronze badges

answered Nov 18, 2020 at 3:30

Andre Alves

314 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

enhzflep Over a year ago

@CodeBug - So does your comment. ;)

CodeBug Over a year ago

@enhzflep LOL :-D

Nathan Chu · Accepted Answer · 2020-11-18 03:29:16Z

JavaScript's replace function only replaces the first instance. You can, however, use regex with the /g flag. I replaced "<BR>" with /<BR>/g, and it works (you just have to scroll). If you're interested, there is also String.prototype.replaceAll, but that doesn't have that good browser support.

console.log(document.getElementById("sample").value);
document.getElementById("sample").value = document.getElementById("sample").value.replace(/<BR>/g,"\n");

html, body {
    height: 100%;
}

textarea {
    resize: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel = "stylesheet" href = "style.css">
    <title>Document</title>
</head>
<body>
    <div id = "outer">
        <textarea id="sample">Hi<BR>I<BR>Am<BR>Jake</textarea>
    </div>

    <script src="test.js"></script>
</body>
</html>

Prime · Accepted Answer · 2020-11-18 03:29:17Z

0

Use .value.split("<BR>").join("\n") instead of .value.replace("<BR>", "\n")

document.getElementById("sample").value = document.getElementById("sample").value.split("<BR>").join("\n");

html, body {
    height: 100%;
}

textarea {
    resize: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel = "stylesheet" href = "style.css">
    <title>Document</title>
</head>
<body>
    <div id = "outer">
        <textarea id="sample">Hi<BR>I<BR>Am<BR>Jake</textarea>
    </div>

    <script src="test.js"></script>
</body>
</html>

answered Nov 18, 2020 at 3:29

Prime

2,8592 gold badges11 silver badges24 bronze badges

Comments

The KNVB · Accepted Answer · 2020-11-18 03:34:32Z

0

Here is my solution:

document.getElementById("sample").value = document.getElementById("sample").value.replace(/\<BR\>/g,"\n").trim();

answered Nov 18, 2020 at 3:34

The KNVB

3,8523 gold badges35 silver badges64 bronze badges

Collectives™ on Stack Overflow

Using replace function in javascript

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related