Replace Line Feeds With Commas Using Javascript

The following JavaScript function can be used to replace line feeds and carriage returns with commas. I find this particularly useful when formatting a data column from Excel into an SQL constraint.

Sample Input

1
2
3
4
5

Sample Result

1,2,3,4,5

The JavaScript function uses a simple regular expression to remove line feeds and carriage returns. The comma as the second argument to the ref.value.replace function may be replaced with any other character to meet your specific requirement.

Live Test

Test the code using the following text area. Enter a carriage return / line feed separated column of data, move focus off the text area, and the code will automatically format the list.

Source Code

function remove_crlf(ref) {
  ref.value = ref.value.replace(new RegExp("[\r\n]", "gm"), ",");
}

Using a simple HTML page with a Text Area, we can paste the data list into the form. When the cursor is moved away from the Text Area, the function is automatically called and the list is formatted with commas replacing the line feeds and carriage returns on each line.

Putting all of the code together, we get the following which can be saved to an html file.

<html>
  <head>
    <script language='javascript'>
      function remove_crlf(ref) {
        ref.value = ref.value.replace(new RegExp("[\r\n]", "gm"), ",");
      }
    </script>
  </head>
  <body>
    <form name='frmremover'>
      <textarea name="txtdata" rows="5" cols="40" onblur="javascript:remove_crlf(this)"></textarea>
    </form>
  </body>
</html>

Display the File Last Updated Date Using jQuery in SharePoint

In this example, assume there is a dashboard page on a SharePoint site that displays a number of graphs and charts. This dashboard is based on data contained in a single file located in a document library on the same site. Whenever this file is updated, the last modified date of the file needs to be automatically reflected on the dashboard page. This allows the page viewer to know the freshness of the dashboard data without requiring the content owner to edit the dashboard page itself with every data change. The following code will display the file last updated date using jQuery, the SharePoint Client Object Model (sp.js), and a bit of HTML. The formatDate function is used to format the file last modified timestamp in dd-mon-yyyy format.

Add a Content Editor Web Part to the dashboard page and include the following script in the source (or as a reference to a script file).

Change the FileUrl variable in getFileInfo() to the appropriate file path. When the code executes, it will replace the contents of the “data_last_update_date” container with the formatted last modified timestamp.

Source Code

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script language='javascript'>
  function getFileInfo() {
    var clientContext = SP.ClientContext.get_current();
    var web = clientContext.get_web();
    var FileUrl = '/path/to/file.txt';
    var file = web.getFileByServerRelativeUrl(FileUrl);

    clientContext.load(file);

    clientContext.executeQueryAsync(
      function() {
        $('#data_last_update_date').html("Data Last Updated: " + formatDate(file.get_timeLastModified()));
      },
      function(sender, args) {
        console.log('Function getFileInfo() failed: ' + args.get_message());
      }
    );
  }

  function formatDate(timestamp) {
    var month_names = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
    var pad = "00";

    if(timestamp) {
      var d = new Date(timestamp);

      return (pad + d.getDate()).slice(-pad.length) + "-" + month_names[d.getMonth()] + "-" + d.getFullYear();
    }
  }

  $(document).ready(function() {
    ExecuteOrDelayUntilScriptLoaded(getFileInfo, "sp.js");
  });
</script>

<p> </p>
<div id='data_last_update_date' style='text-align:center; width:100%;'></div>

Base64 Decoding and Encoding in JavaScript

Base64 decoding and encoding in JavaScript is handled through the atob() and btoa() functions respectively. The following script provides a text area to enter the original data which may then be decoded or encoded in Base64 using the provided buttons. The copy button populates the “Data” text area with the current value of the “Result” text area. The tool below may be used as-is or the source code may be copied to a local text file and opened in a web browser. I created this utility to provide a local solution to decode/encode Base64 data instead of using one of the available online solutions since I didn’t know whether or not the submitted data was captured on those servers.

Live Test

Data:

Result:

Source Code

<form>
  <div><strong>Data:</strong> <textarea id="txt_data"></textarea></div>
  <input type="button" id="btn_decode" value="Decode">
  <input type="button" id="btn_encode" value="Encode">
  <input type="button" id="btn_copy" value="Copy Result to Data">
  <p> </p>
  <div><strong>Result:</strong> <textarea id="txt_result"></textarea></div>
</form>
<script language='javascript'>
  document.getElementById('btn_decode').onclick = function() {
    document.getElementById('txt_result').value = '';
    var strDataToDecode = document.getElementById('txt_data').value;
    var strDecodedData = escape(atob(strDataToDecode));
    document.getElementById('txt_result').value = strDecodedData;
  }
  document.getElementById('btn_encode').onclick = function() {
    document.getElementById('txt_result').value = '';
    var strDataToEncode = document.getElementById('txt_data').value;
    var strEncodedData = btoa(unescape(strDataToEncode));
    document.getElementById('txt_result').value = strEncodedData;
  }
  document.getElementById('btn_copy').onclick = function() {
    document.getElementById('txt_data').value = document.getElementById('txt_result').value;
    document.getElementById('txt_result').value = '';
  }
</script>