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 understand the freshness of the dashboard data without requiring the content owner to edit the dashboard page itself with every data change. The following code displays the file last updated date as well as the last modified by user name 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.

Step 1 – Add Content Editor Web Part

Add a Content Editor Web Part to the dashboard page.

SharePoint – Add Content Editor
SharePoint – Add Content Editor

Step 2 – Modify the Script

Change the fileRelativeUrl variable in getFileInfo() to the appropriate local file path. In other words, only include the subdirectory path and filename.

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

<script language='javascript'>
  var file = null;
  var user = null;

  function getFileInfo() {
    var clientContext = SP.ClientContext.get_current();
    var web = clientContext.get_web();
    var fileRelativeUrl = '/server/path/to/file.txt';

    this.file = web.getFileByServerRelativeUrl(fileRelativeUrl);
    clientContext.load(this.file);

    this.user = this.file.get_modifiedBy();
    clientContext.load(user);

    clientContext.executeQueryAsync(
      Function.createDelegate(this, this.onQuerySucceeded), 
      Function.createDelegate(this, this.onQueryFailed)
    );
  }

  function onQuerySucceeded(sender, args) {
    $('#source_data_info').html("Data Last Updated: " + formatDate(this.file.get_timeLastModified()) + "<p> </p>" + "Data Modified By: " + user.get_title());
  }

  function onQueryFailed(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>

Step 3 – Edit Content Editor Web Part Properties to Reference Script

Edit the Content Editor Web Part properties. Include a link to the below script by adding the code to a file in a document library on the SharePoint site.

SharePoint – Add Link to Script
SharePoint – Add Link to Script

Result

When the code executes, it replaces the contents of the “source_data_info” container with the formatted last modified timestamp and the last modified by user name.

SharePoint – Final Result
SharePoint – Final Result

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>