为从SQL数据库中提取的数据添加换行符

Question

I am retrieving a field from a database into my HTML page. I just place the field between <p></p> I get the following,

84 Series Harmony3 Desk Top Module 2 x UK Power Socket 3.15A Individually Fused 1m Black Hardwired Mains Cable To GST Wieland Plug Anodised Silver Body Black Plastic Fascias Black Inner and Outer End Caps

Encoded String 84+Series+Harmony3+Desk+Top+Module%0D%0A2+x+UK+Power+Socket%0D%0A3%2E15A+Individually+Fused%0D%0A1m+Black+Hardwired+Mains+Cable%0D%0ATo+GST+Wieland+Plug++++++++++++%0D%0AAnodised+Silver+Body%0D%0ABlack+Plastic+Fascias%0D%0ABlack+Inner+and+Outer+End+Caps%0D%0A++++++++++++++++++++++++++++++%0D%0A%0D%0A%0A

I am using Classic ASP & Dreamweaver Bindings.

If I place the same field in <textarea></textarea it understands that there are line breaks in the field, and displays the text correctly,

84 Series Harmony3 Desk Top Module 2 x UK Power Socket 3.15A Individually Fused 1m Black Hardwired Mains Cable To GST Wieland Plug
Anodised Silver Body Black Plastic Fascias Black Inner and Outer End Caps

I was just wondering how I can achieve the same result without using <textarea></textarea> .

I think I need to tell the text where to break using %0D and %0A but when I have tried this using javascript, it doesn't appear to work.

Any suggestions using Javascript, JQuery or CSS would be great.

Answer 1

Your problem is that html is ignoring whitespace most of the times - especially linebreaks are just "not there" when just enclosed in a <p> .

To have linebreaks in your displayed page you need to add <br> -tags where linebreaks are in your content.

As an alternative you might try enclosing your data in <pre></pre> instead of <p></p> , but that will preserve all whitespace (tabs, blanks, linebreaks).

Answer 2

Try this:

var str = "your encoded string";
decodeURIComponent(str).replace(/\+/g, " ").replace(/\r/g, "<br/>");

See this fiddle.

HTML

<p id="container"></p>

JavaScript

var str = "84+Series+Harmony3+Desk+Top+Module%0D%0A2+x+UK+Power+Socket%0D%0A3%2E15A+Individually+Fused%0D%0A1m+Black+Hardwired+Mains+Cable%0D%0ATo+GST+Wieland+Plug++++++++++++%0D%0AAnodised+Silver+Body%0D%0ABlack+Plastic+Fascias%0D%0ABlack+Inner+and+Outer+End+Caps%0D%0A++++++++++++++++++++++++++++++%0D%0A%0D%0A%0A";

document.getElementById("container").innerHTML = decodeURIComponent(str).replace(/\+/g, " ").replace(/\r/g, "<br/>");

Answer 3

CSS has quite a nice way of doing this. Instead of a textarea, give your <p> tag the CSS style white-space:pre-line . IE9 and below doesn't support this property, but that should no longer be an issue.

It's also quite easy to do it server side with Classic ASP. Eg if you're currently using

<%= rs("articletext") %> 

to retrieve text from the database you could replace it with

<%= (replace(rs("articletext"),chr(13),"<br />")) %>

Answer 4

Please try the following:

var str = "your string"; 
unescape(s).replace(/\+/g, " ").replace(/\r/g, "<br/>");

Demo:

 var s = "84+Series+Harmony3+Desk+Top+Module%0D%0A2+x+UK+Power+Socket%0D%0A3%2E15A+Individually+Fused%0D%0A1m+Black+Hardwired+Mains+Cable%0D%0ATo+GST+Wieland+Plug++++++++++++%0D%0AAnodised+Silver+Body%0D%0ABlack+Plastic+Fascias%0D%0ABlack+Inner+and+Outer+End+Caps%0D%0A++++++++++++++++++++++++++++++%0D%0A%0D%0A%0A"; document.getElementById('text').innerHTML = unescape(s).replace(/\\+/g, " ").replace(/\\r/g, "<br/>"); 

 <div id="text"> </div> 

Answer 5

you can use this:

str = decodeURIComponent(str).replace(/\+/g, " ").replace(/\%0D\%0A(%0A)?/g, '<br />');

 var str = "84+Series+Harmony3+Desk+Top+Module%0D%0A2+x+UK+Power+Socket%0D%0A3%2E15A+Individually+Fused%0D%0A1m+Black+Hardwired+Mains+Cable%0D%0ATo+GST+Wieland+Plug++++++++++++%0D%0AAnodised+Silver+Body%0D%0ABlack+Plastic+Fascias%0D%0ABlack+Inner+and+Outer+End+Caps%0D%0A++++++++++++++++++++++++++++++%0D%0A%0D%0A%0A" str = decodeURIComponent(str).replace(/\\+/g, " ").replace(/\\%0D\\%0A(%0A)?/g, '<br />'); console.log(str) 

Answer 6

One approach, in JavaScript, is the following:

// using a named function to decode the supplied string:
function decodeASPEncodedString(str) {

  // here we use decodeURI() to remove the %-prefixed character sequences
  // appropriately, and pass the resulting string to
  // String.prototype.replace().
  // here we replace a sequence of one or more ('+') + characters
  // ('\+', escaped because the '+' character has a special meaning
  // in regular expressions) or ('|') any character at the end of a
  // line ('$', with the multiline ('m') flag) and pass the match
  // the callback function:
  return decodeURI(encodedString).replace(/\++|(.)$/mg, function(match) {

    // here we use RegExp.prototype.test() to check whether the match
    // matches the supplied regular expression (as above); if it does
    // we return a String consisting of one white-space, if not we
    // return the concatenated String of 'match' and the HTML for
    // the <br /> element:
    return /\++/.test(match) ? ' ' : match + '<br />';
  });
}

var encodedString = "84+Series+Harmony3+Desk+Top+Module%0D%0A2+x+UK+Power+Socket%0D%0A3%2E15A+Individually+Fused%0D%0A1m+Black+Hardwired+Mains+Cable%0D%0ATo+GST+Wieland+Plug++++++++++++%0D%0AAnodised+Silver+Body%0D%0ABlack+Plastic+Fascias%0D%0ABlack+Inner+and+Outer+End+Caps%0D%0A++++++++++++++++++++++++++++++%0D%0A%0D%0A%0A",
  outputTo = document.body;

// setting the innerHTML of the outputTo variable to the
// decoded string:
outputTo.innerHTML = decodeASPEncodedString(encodedString);

 function decodeASPEncodedString(str) { return decodeURI(encodedString).replace(/\\++|(.)$/mg, function(match) { return /\\++/.test(match) ? ' ' : match + '<br />'; }); } var encodedString = "84+Series+Harmony3+Desk+Top+Module%0D%0A2+x+UK+Power+Socket%0D%0A3%2E15A+Individually+Fused%0D%0A1m+Black+Hardwired+Mains+Cable%0D%0ATo+GST+Wieland+Plug++++++++++++%0D%0AAnodised+Silver+Body%0D%0ABlack+Plastic+Fascias%0D%0ABlack+Inner+and+Outer+End+Caps%0D%0A++++++++++++++++++++++++++++++%0D%0A%0D%0A%0A", outputTo = document.body; outputTo.innerHTML = decodeASPEncodedString(encodedString); 

In order to make the above slightly more functional, and to prevent it (accidentally) overriding the contents of the whole document the following (perhaps slightly over-kill) approach is possible:

// the opts Object enables the user to pass in options to the
// function for customisation;
// 'addClasses' :
//    Array:       an array of classNames to add to the
//                 created elements (if wrapped),
//    String:      a white-space separated list of
//                 classes to add the the newly-created
//                 elements.
// 'breakLines':
//    Boolean:     true:
//                     a <br /> element is added after each
//                     decoded portion of text,
//                 false: 
//                     no <br /> element is added.
// 'encoded':      
//                 the ASP-encoded string to be decoded.
// 'incrementClass':
//    String:      the class-name that the function will
//                 increment in the form of 'line0', 'line1'...
// 'lastCharacter':
//    String:      the character to appear after the
//                 last piece of text in the newly-
//                 created nodes/elements.
// 'lastLineCharacter':
//    String:      the character to appear after the text
//                 in each 'line' (except the last).
// 'parent':        
//    Node:        the node to which the decoded text should be
//                 appended
// 'replace':
//    Boolean:     true:
//                     the existing content of the parent
//                     element will be replaced,
//                 false:
//                     the new content will be appended after
//                     any existing content.
// 'wrapLines':
//   Boolean:      false:
//                     the 'lines' will not be wrapped with an
//                     element,
//                 true:
//                     the 'lines' will be wrapped in a <span>
//                     element.
//  String:        the type of element with which the line
//                 should be wrapped ('li', '<li>', 'div', '<div>'...)
function decodeASPEncodedString(opts) {
  var settings = {
    'addClasses': [],
    'breakLines': true,
    'encoded': null,
    'incrementClass': 'line',
    'lastCharacter': '.',
    'lastLineCharacter': '',
    'parent': document.body,
    'replace': false,
    'wrapLines': false
  };

  // iterating over the opts Object's keys, if supplied, or over
  // the (non-existent) keys of an empty Object if not in order
  // to prevent an error being thrown.
  Object.keys(opts || {}).forEach(function(key) {
    // key (the first argument) relates to the current key
    // in the array of keys over which we're iterating.

    // setting the current key, in the settings Object, to
    // the value of the current key held in the opts Object:
    settings[key] = opts[key];
  });

  // if we have a value in the key that should hold the
  // ASP-encoded string we proceed, otherwise we avoid this
  // 'if' statement (and later simply return undefined):
  if (settings.encoded) {

    // two elements for later use:
    var el, tempEl;

    // if settings.wrapLines is not equal to false (meaning
    // the 'lines' should be wrapped in an element):
    if (settings.wrapLines !== false) {

      // if the value is exactly equal to true (so not
      // merely 'truthy'):
      if (settings.wrapLines === true) {

        // we create a <span> element:
        el = document.createElement('span');

      // otherwise, if the passed-in value has a nodeType, and that
      // nodeType is equal to 1, then we have an element-node, so we
      // use that directly:
      } else if (settings.wrapLines.nodeType && settings.wrapLines.nodeType === 1) {
        el = settings.wrapLines;

      // otherwise if the argument is equal to a string...
      } else if ('string' === typeof settings.wrapLines) {

        // we create a new element from that String, and 
        // document.createElement(), after first ensuring we
        // remove all (g flag) whitespace ('\s+') or ('|') '<'
        // or '>' or '\' or '/' characters by replacing those
        // matches with a zero-length String:
        el = document.createElement(settings.wrapLines.replace(/\s+|<|>|\\|\//g, ''));
      }
    }

    // if the settings.addClasses value is not an Array and is a String:
    if (!Array.isArray(settings.addClasses) && 'string' === typeof settings.addClasses) {

      // we check that the value, when split on one-or-more ('+')
      // white-space characters ('\s') has a length we update the
      // settings.addClass property to the array returned by
      // separating that String into a white-space-separated Array,
      // or false (if there is no length, or zero-length):
      settings.addClasses = settings.addClasses.split(/\s+/).length ? settings.addClasses.split(/\s+/) : false;

    // otherwise, if it is an Array:
    } else if (Array.isArray(settings.addClasses)) {
      // we update the value to a filtered array, using
      // Array.prototype.filter(Boolean) to retain only the
      // array-elements with a truthy value, or false:
      settings.addClasses = settings.addClasses.filter(Boolean).length > 0 ? settings.addClasses : false;
    }

    // creating a documentFragment() as a containe for the
    // created nodes:
    var fragment = document.createDocumentFragment(),

      // if the settings.lastLineCharacter has a length, we
      // we set the 'lastCharacters' variable to that String,
      // otherwise to an empty String:
      lastCharacters = settings.lastLineCharacter.length ? settings.lastLineCharacter + ' ' : '',

      // lastCharacter is simply a shorter form of access
      // to the settings.lastCharacter variable:
      lastCharacter = settings.lastCharacter,

      // here we decde the supplied string, using
      // decodeURI:
      decoded = decodeURI(encodedString)
          // then replacing a sequence of one-or-more ('+')
          // plus-characters ('\+', escaped because of its
          // special meaning in regular expressions) with a
          // single white-space (' '):
          .replace(/\++/mg, ' ')
          // we then split the resulting String on the
          // carriage-return characters (\r), creating
          // an Array:
          .split(/\r/)
          // using Array.prototype.map() to create a new
          // Array from the one over which we're iterating:
          .map(function(m) {
            // 'm', the first argument, refers to the array-element
            // of the Array over which we're iterating:

             // here we remove a sequence of one-or-more ('+')
             // newline ('\n') characters followed by
             // zero-or-more ('*') white-space (\s) characters;
             // returning that changed String to the new Array:
             return m.replace(/[\n]+[\s]*/, '');
          })
          // using Array.prototpye.filter(), with the
          // Boolean filter to retain only truthy
          // array-elements in the returned Array:
          .filter(Boolean)
          // Array.prototype.map() to further modify the
          // Array, and return a new Array in its place:
          .map(function(line, index) {

            // settings.wrapLines is not-equal to false,
            // so we wish to wrap the lines:
            if (settings.wrapLines !== false) {

              // we create a clone of the passed-in node:
              tempEl = el.cloneNode();

              // we set its textContent (text-property)
              // to that of the 'line' plus any lastCharacters:
              tempEl.textContent = line + lastCharacters;
                // if the settings.addClasses is not false,
                // and has a non-zero length:
                if (settings.addClasses !== false && settings.addClasses.length) {
                  // we iterate over the array of classes:
                  settings.addClasses.forEach(function(c) {

                    // and add each of those classes to the
                    // classList of the tempEl node:
                    tempEl.classList.add(c);
                  });
              }

              // if settings.incrementClass is of type 'string':
              if ('string' === typeof settings.incrementClass) {

                // we also add that class (with the supplied
                // prefix) concatenated with the curent index:
                tempEl.classList.add(settings.incrementClass + index);
              }
              // here we return the tempEl node:
              return tempEl;

            // otherwise, if we don't wish to wrap the lines in
            // an HTML element:
            } else if (settings.wrapLines === false) {

              // we return a textNode from the line-text and the
              // lastCharacters String:
              return document.createTextNode(line + lastCharacters);
            }
      }),

      // retrieving a reference to the last element of the created
      // array:
      last = decoded[decoded.length - 1];

    // updating the textContent of the last array-element,
    // using the new RegExp constructor to create a regular expression
    // matching the lastCharacters String followed by a sequence of
    // zeror-or-more ('*') white-space ('\\s', double-escaped because the
    // '\' character is an escape character in both Strings and Regular
    // Expressions) at the end of the string ('$'), and replacing that
    // matched character set with the String held in the lastCharacter
    // variable:
    last.textContent = last.textContent.replace(new RegExp(lastCharacters + '\\s*$'), lastCharacter);

    // iterating over the array of nodes in the decoded Array:    
    decoded.forEach(function(node) {

      // if we don't wish to wrap-lines and we wish to break lines, or if
      // we wish to wrap-lines and we do wish to break lines:
      if (settings.wrapLines === false && settings.breakLines === true || settings.wrapLines !== false && settings.breakLines === true) {

        // we first append the current node from the array to
        // the created document fragment:
        fragment.appendChild(node);

        // if settings.wrapLines is truthy, and settings.breakLines
        // is true:
        if (settings.wrapLines && settings.breakLines === true) {
          // we append a <br> node to the current node
          // despite that node already being within the
          // document fragment:
          node.appendChild(document.createElement('br'));
        } else {
          // otherwise we add the <br> node after the
          // appended node:
          fragment.appendChild(document.createElement('br'));
        }

      // otherwise:
      } else if (settings.wrapLines === false && settings.breakLines === false || settings.wrapLines !== false && settings.breakLines === false) {
        // we simply append the node to the fragment:
        fragment.appendChild(node);
      }
    });

    // if we wish to replace the contents of the parent:
    if (settings.replace === true) {

      // while the parent has a firstChild:
      while (settings.parent.firstChild) {
        // we remove that firstChild:
        settings.parent.removeChild(settings.parent.firstChild);
      }
    }

    // here we append the document fragment to the 
    // parent:
    settings.parent.appendChild(fragment);

    // we normalize() the parent to merge adjacent
    // text-nodes together into one:
    settings.parent.normalize();

    // and here we return the decoded array of nodes/elements:
    return decoded;

  }

  return undefined;
}

var encodedString = "84+Series+Harmony3+Desk+Top+Module%0D%0A2+x+UK+Power+Socket%0D%0A3%2E15A+Individually+Fused%0D%0A1m+Black+Hardwired+Mains+Cable%0D%0ATo+GST+Wieland+Plug++++++++++++%0D%0AAnodised+Silver+Body%0D%0ABlack+Plastic+Fascias%0D%0ABlack+Inner+and+Outer+End+Caps%0D%0A++++++++++++++++++++++++++++++%0D%0A%0D%0A%0A";

decodeASPEncodedString({
  'addClasses': ['one', 'two'],
  'breakLines': true,
  'encoded': encodedString,
  'lastLineCharacter': ';',
  'parent': document.querySelector('ul'),
  'wrapLines': 'li'
});

 function decodeASPEncodedString(opts) { var settings = { 'addClasses': [], 'breakLines': true, 'encoded': null, 'incrementClass': 'line', 'lastCharacter': '.', 'lastLineCharacter': '', 'parent': document.body, 'replace': false, 'wrapLines': false }; Object.keys(opts || {}).forEach(function(key, index) { settings[key] = opts[key]; }); if (settings.encoded) { var el, tempEl; if (settings.wrapLines !== false) { if (settings.wrapLines === true) { el = document.createElement('span'); } else if (settings.wrapLines.nodeType && settings.wrapLines.nodeType === 1) { el = settings.wrapLines; } else if ('string' === typeof settings.wrapLines) { el = document.createElement(settings.wrapLines.replace(/\\s+|<|>/g, '')); } } if (!Array.isArray(settings.addClasses) && 'string' === typeof settings.addClasses) { settings.addClasses = settings.addClasses.split(/\\s+/).length ? settings.addClasses.split(/\\s+/) : false; } else if (Array.isArray(settings.addClasses)) { settings.addClasses = settings.addClasses.filter(Boolean).length > 0 ? settings.addClasses : false; } var fragment = document.createDocumentFragment(), lastCharacters = settings.lastLineCharacter.length ? settings.lastLineCharacter + ' ' : '', lastCharacter = settings.lastCharacter, decoded = decodeURI(encodedString).replace(/\\++/mg, ' ').split(/\\r/).map(function(m) { return m.replace(/[\\n]+[\\s]*/, ''); }).filter(Boolean).map(function(line, index) { if (settings.wrapLines !== false) { tempEl = el.cloneNode(); tempEl.textContent = line + lastCharacters; if (settings.addClasses !== false && settings.addClasses.length) { settings.addClasses.forEach(function(c) { tempEl.classList.add(c); }); } if ('string' === typeof settings.incrementClass) { tempEl.classList.add(settings.incrementClass + index); } return tempEl; } else if (settings.wrapLines === false) { return document.createTextNode(line + lastCharacters); } }), last = decoded[decoded.length - 1]; last.textContent = last.textContent.replace(new RegExp(lastCharacters + '\\\\s*$'), lastCharacter); decoded.forEach(function(node) { if (settings.wrapLines === false && settings.breakLines === true || settings.wrapLines !== false && settings.breakLines === true) { fragment.appendChild(node); if (settings.wrapLines && settings.breakLines === true) { node.appendChild(document.createElement('br')); } else { fragment.appendChild(document.createElement('br')); } } else if (settings.wrapLines === false && settings.breakLines === false || settings.wrapLines !== false && settings.breakLines === false) { fragment.appendChild(node); } }); if (settings.replace === true) { while (settings.parent.firstChild) { settings.parent.removeChild(settings.parent.firstChild); } } settings.parent.appendChild(fragment); settings.parent.normalize(); return decoded; } return undefined; } var encodedString = "84+Series+Harmony3+Desk+Top+Module%0D%0A2+x+UK+Power+Socket%0D%0A3%2E15A+Individually+Fused%0D%0A1m+Black+Hardwired+Mains+Cable%0D%0ATo+GST+Wieland+Plug++++++++++++%0D%0AAnodised+Silver+Body%0D%0ABlack+Plastic+Fascias%0D%0ABlack+Inner+and+Outer+End+Caps%0D%0A++++++++++++++++++++++++++++++%0D%0A%0D%0A%0A"; decodeASPEncodedString({ 'addClasses': ['one', 'two'], 'breakLines': true, 'encoded': encodedString, 'lastLineCharacter': ';', 'parent': document.querySelector('ul'), 'wrapLines': 'li' }); 

 <p> pre-existing child </p> <ul></ul>