javascript replace dot (not period) character

Question

I have some text being rendered that has an inline list with the bullet points notated by the "•" character, all on one line of text.

It's ugly, but I don't want to change the source data. So I thought I'd just do a quick javascript replace to insert breaks before each of the dots for a little bit easier reading.

here's what I did:

   var formattedMessage = message.replace(/•/g, "<br />•");

I thought this would work, but when I try to render formattedMessage it does not contain the breaks.

Any thoughts on why that would be the case? I thought it might be because it's thinking the angle brackets in the replacement expression are regex expressions, but all the examples I see of the string.replace() function only shows the first part accepting a regex expression, and 2 pages into Google searches does not suggest conflicting information, so I have to assume it's because it's an odd character.

How do you replace this?

ADDITIONAL INFO per request, this is how I'm formatting the data (it's in a javascript modal dialog)

function modalConfirm(message, title, callback) {
    var formattedMessage = message.replace(/�/g, "<br />�");
    $("#extra-info").modal({

        closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
        position: ["20%"],
        overlayId: "confirm-overlay",
        containerId: "confirm-container",
        onShow: function (dialog) {
            var modal = this;
            $("#extra-info .message").html(formattedMessage);
            $("#extra-info .title").html(title || "Additional Info");
            $("#extra-info .modal-ok", dialog.data[0]).click(
                function () {
                    if ($.isFunction(callback)) {
                        callback.apply(true);
                    }
                    modal.close();
                });
        }
    });

The rendered HTML is as follows:

<div id="confirm-container" class="simplemodal-container" style="position: fixed; z-index: 1002; height: 180px; width: 260px; left: 28px; top: 20%;"><a href="#" title="Close" class="modal-close simplemodal-close">x</a><div tabindex="-1" class="simplemodal-wrap" style="height: 100%; outline: 0px; width: 100%; overflow: visible;"><div id="extra-info" class="simplemodal-data" style="">
            <div class="header title">Additional Info</div>
            <div class="message">Examples of 1 serving are: • 1 medium apple or orange (the size of a tennis ball) • ½ cup of berries or chopped fruit • 1 cup of leafy raw vegetables • ½ cup of cooked vegetables • 1 medium potato (the size of a computer mouse) • 6 ounces of pure fruit or vegetable juice</div>
            <div class="buttons">
                <div class="modal-ok simplemodal-close">OK</div>
            </div>
        </div></div></div>

@RiteshKarwa it's rendered on the fly, I'll include the developer tool's data. — user610217
– user610217, Commented Jun 22, 2015 at 20:29
Most likely your html/js has non-Unicode charset. Ensure that it has Unicode charset (UTF-8) — hindmost
– hindmost, Commented Jun 22, 2015 at 20:31

Luke Benting · Accepted Answer · 2015-06-22 20:38:54Z

7

Try using the unicode character code, \u2022, instead:

message.replace(/\u2022/, "<br />\u2022");

edited Jun 22, 2015 at 20:38

anon

answered Jun 22, 2015 at 20:32

Luke Benting

16811 bronze badges

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

Comments

WWZee · Accepted Answer · 2015-06-22 20:31:49Z

0

I just tried this problem and i got it fixed by putting quotes around your • character.

<p id="demo">Look it's a • character</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    var str = document.getElementById("demo").innerHTML; 
    var res = str.replace("•", "helpful");
document.getElementById("demo").innerHTML = res;
}
</script>

answered Jun 22, 2015 at 20:31

WWZee

4972 gold badges8 silver badges23 bronze badges

Collectives™ on Stack Overflow

javascript replace dot (not period) character

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related