我正在从数据库中检索一个字段到我的HTML页面中。我只是将字段放在<p></p>之间我得到以下内容，
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
编码字符串
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
我正在使用Classic ASP＆amp; Dreamweaver Bindings。
如果我在<textarea></textarea中放置相同的字段，它会理解字段中有换行符，并正确显示文字，
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
我只是想知道如何在不使用<textarea></textarea>的情况下实现相同的结果。
我想我需要使用%0D和%0A告诉文本在哪里中断，但是当我使用javascript尝试此操作时，它似乎无效。
任何使用Javascript，JQuery或CSS的建议都会很棒。
答案 0 :(得分：1)
你的问题是html大多数时候都忽略了空格 - 尤其是换行符只是＆＃34;不存在＆＃34;刚封在<p>。
要在显示的页面中设置换行符，您需要添加<br> - 内容中包含换行符的标记。
作为替代方案，您可以尝试将数据封装在<pre></pre>而不是<p></p>中，但这样可以保留所有空格（制表符，空格，换行符）。
答案 1 :(得分：1)
试试这个：
var str = "your encoded string";
decodeURIComponent(str).replace(/\+/g, " ").replace(/\r/g, "<br/>");
请参阅this小提琴。
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/>");
答案 2 :(得分：1)
CSS有很好的方法可以做到这一点。而不是textarea，为您的<p>标记提供CSS样式white-space:pre-line。 IE9及以下版本不支持此属性，但这应该不再是问题。
使用Classic ASP进行服务器端也很容易。例如，如果您当前正在使用
<%= rs("articletext") %>
从数据库中检索文本，您可以用
替换它<%= (replace(rs("articletext"),chr(13),"<br />")) %>
答案 3 :(得分：0)
请尝试以下方法：
var str = "your string";
unescape(s).replace(/\+/g, " ").replace(/\r/g, "<br/>");
<强>演示：
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>
答案 4 :(得分：0)
你可以用这个：
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)
答案 5 :(得分：0)
JavaScript中的一种方法如下：
// 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);
为了使上述功能略微更具功能性，并防止（意外地）覆盖整个文档的内容，可能会出现以下（可能略微过度杀死）的方法：
// 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>