Search code examples
javascriptnewlineurl-parameters

Javascript to replace %0A for <br> html elements

How can I display URL parameters to display on a new line on a HTML page using Javascript? I am working with this code below:

return decodeURIComponent(pair[1].replace(/\%0A/g, "<br/>")); but unable to display the results.

The above code is working because for example, if I return decodeURIComponent(pair[1].replace(/\%20/g, " ")); I can see the results. Only when I use HTML elements it don't work i.e. <br>.

Here's a full code:

function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) {
                return decodeURIComponent(pair[1].replace(/\%0A/g, "\n"));
            }
        }
    }

Edit:

    getQueryVariable("line1");
    getQueryVariable("line2");
    getQueryVariable("line3");


$(document).ready(function () {
        $(function () {
            $('#input1').val(getQueryVariable('line1')).trigger('keyup');
        });
        $('#input1').on('keyup', function () {
            var value = $(this).val();
            $("pre#one").html(value);
        });
    });

<input type="hidden" id="input1" />
<ul id="texts">  
    <li><pre id="one"></pre></li>
</ul>
Solution

  • It sounds like you want to take the query parameters and render them in a ul, with line breaks where line breaks appear in the query parameter (e.g., newline, character code 0x0A, aka \n in JavaScript and many similar languages).

    That's a three-part process:

    1. Decoding the parameter with decodeURIComponent (you're already doing that).
    2. Escaping characters in the result which are special in HTML (in practice, just & and < is sufficient).
    3. Replacing literal newlines, which are rendered as a space in HTML, with a line break or using a pre element or one of the white-space CSS properties that renders line breaks (such as white-space: pre).

    Here's an example where we convert \n to <br>:

    // A stand-in for window.location.search, since
// we can't control that in snippets
var search = "?" + [
  "line1=" + encodeURIComponent("This is line1"),
  "line2=" + encodeURIComponent("This is line2 which has\nmore than one line"),
  "line3=" + encodeURIComponent("This is line3")
  ].join("&");

function getQueryVariable(variable) {
    var query = search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
            return decodeURIComponent(pair[1]);
        }
    }
}

function escapeHTML(s) {
  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;");
}

function addQueryParamLI(ul, param) {
  var li = document.createElement("li");
  li.innerHTML = escapeHTML(param).replace(/\n/g, "<br>");
  ul.appendChild(li);
  return li;
}

var ul = document.getElementById("query-params");
addQueryParamLI(ul, getQueryVariable("line1"));
addQueryParamLI(ul, getQueryVariable("line2"));
addQueryParamLI(ul, getQueryVariable("line3"));
    Query parameters:
<ul id="query-params"></ul>

    Here's an example using white-space: pre (only change is that we don't convert \n to <br> in addQueryParamLI, and we add the CSS property to the li elements with a rule):

    // A stand-in for window.location.search, since
// we can't control that in snippets
var search = "?" + [
  "line1=" + encodeURIComponent("This is line1"),
  "line2=" + encodeURIComponent("This is line2 which has\nmore than one line"),
  "line3=" + encodeURIComponent("This is line3")
  ].join("&");

function getQueryVariable(variable) {
    var query = search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
            return decodeURIComponent(pair[1]);
        }
    }
}

function escapeHTML(s) {
  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;");
}

function addQueryParamLI(ul, param) {
  var li = document.createElement("li");
  li.innerHTML = escapeHTML(param);
  ul.appendChild(li);
  return li;
}

var ul = document.getElementById("query-params");
addQueryParamLI(ul, getQueryVariable("line1"));
addQueryParamLI(ul, getQueryVariable("line2"));
addQueryParamLI(ul, getQueryVariable("line3"));
    #query-params li {
  white-space: pre;
}
    Query parameters:
<ul id="query-params"></ul>