JavaScript是否有一种截断HTML文本的方法，而不会出现匹配标记等所有令人头疼的问题？
谢谢。
答案 0 :(得分：10)
没有内置的javascript。你可以看一下jQuery plugin。
答案 1 :(得分：9)
我遇到了同样的问题，最后写下来处理它。它将HTML截断为给定长度，清除可能最终被剪掉的任何开始/结束标记，然后关闭所有未标记的标记：
function truncateHTML(text, length) {
var truncated = text.substring(0, length);
// Remove line breaks and surrounding whitespace
truncated = truncated.replace(/(\r\n|\n|\r)/gm,"").trim();
// If the text ends with an incomplete start tag, trim it off
truncated = truncated.replace(/<(\w*)(?:(?:\s\w+(?:={0,1}(["']{0,1})\w*\2{0,1})))*$/g, '');
// If the text ends with a truncated end tag, fix it.
var truncatedEndTagExpr = /<\/((?:\w*))$/g;
var truncatedEndTagMatch = truncatedEndTagExpr.exec(truncated);
if (truncatedEndTagMatch != null) {
var truncatedEndTag = truncatedEndTagMatch[1];
// Check to see if there's an identifiable tag in the end tag
if (truncatedEndTag.length > 0) {
// If so, find the start tag, and close it
var startTagExpr = new RegExp(
"<(" + truncatedEndTag + "\\w?)(?:(?:\\s\\w+(?:=([\"\'])\\w*\\2)))*>");
var testString = truncated;
var startTagMatch = startTagExpr.exec(testString);
var startTag = null;
while (startTagMatch != null) {
startTag = startTagMatch[1];
testString = testString.replace(startTagExpr, '');
startTagMatch = startTagExpr.exec(testString);
}
if (startTag != null) {
truncated = truncated.replace(truncatedEndTagExpr, '</' + startTag + '>');
}
} else {
// Otherwise, cull off the broken end tag
truncated = truncated.replace(truncatedEndTagExpr, '');
}
}
// Now the tricky part. Reverse the text, and look for opening tags. For each opening tag,
// check to see that he closing tag before it is for that tag. If not, append a closing tag.
var testString = reverseHtml(truncated);
var reverseTagOpenExpr = /<(?:(["'])\w*\1=\w+ )*(\w*)>/;
var tagMatch = reverseTagOpenExpr.exec(testString);
while (tagMatch != null) {
var tag = tagMatch[0];
var tagName = tagMatch[2];
var startPos = tagMatch.index;
var endPos = startPos + tag.length;
var fragment = testString.substring(0, endPos);
// Test to see if an end tag is found in the fragment. If not, append one to the end
// of the truncated HTML, thus closing the last unclosed tag
if (!new RegExp("<" + tagName + "\/>").test(fragment)) {
truncated += '</' + reverseHtml(tagName) + '>';
}
// Get rid of the already tested fragment
testString = testString.replace(fragment, '');
// Get another tag to test
tagMatch = reverseTagOpenExpr.exec(testString);
}
return truncated;
}
function reverseHtml(str) {
var ph = String.fromCharCode(206);
var result = str.split('').reverse().join('');
while (result.indexOf('<') > -1) {
result = result.replace('<',ph);
}
while (result.indexOf('>') > -1) {
result = result.replace('>', '<');
}
while (result.indexOf(ph) > -1) {
result = result.replace(ph, '>');
}
return result;
}
答案 2 :(得分：6)
我知道这个问题很老，但我最近遇到了同样的问题。我编写了以下库，它可以安全地截断有效的HTML：https://github.com/arendjr/text-clipper
答案 3 :(得分：2)
有一个mootools插件可以完全满足您的需求： mooReadAll at mootools forge
答案 4 :(得分：0)
我刚刚完成了一个jQuery函数，使用width＆amp;容器的高度。测试一下，看看它是否适合你。我还不确定所有的兼容性问题，错误或限制，但我已经在FF，Chrome和IE7中对它进行了测试。
答案 5 :(得分：0)
如果您想使用Vanilla JS的轻量级解决方案，这应该可以解决问题，尽管它将周围留有空元素，因此这取决于您是否关心这些元素。另外请注意，它会原位改变节点。
function truncateNode(node, limit) {
if (node.nodeType === Node.TEXT_NODE) {
node.textContent = node.textContent.substring(0, limit);
return limit - node.textContent.length;
}
node.childNodes.forEach((child) => {
limit = truncateNode(child, limit);
});
return limit;
}
const span = document.createElement('span');
span.innerHTML = '<b>foo</b><i>bar</i><u>baz</u>';
truncateNode(span, 5);
expect(span.outerHTML).toEqual('<span><b>foo</b><i>ba</i><u></u></span>');
答案 6 :(得分：0)
以上解决方案均不完全符合我的用例，因此我为自己创建了一个小型的javascript函数。它保留了空元素，但可以很容易地纠正。
const truncateWithHTML = (string, length) => {
// string = "<span class='className'>My long string that</span> I want shorter<span> but just a little bit</span>"
const noHTML = string.replace(/<[^>]*>/g, '');
// if the string does not need to be truncated
if (noHTML.length <= max){
return string;
}
// if the string does not contains tags
if (noHTML.length === string.length){
// add <span title=""> to allow complete string to appear on hover
return `<span title="${string}">${string.substring(0, max).trim()}…</span>`;
}
const substrings = string.split(/(<[^>]*>)/g).filter(Boolean);
// substrings = ["<span class='className'>","My long string that","</span>"," I want shorter","<span>"," but just a little bit","</span>"]
let count = 0;
let truncated = [];
for (let i = 0; i < substrings.length; i++) {
let substr = substrings[i];
// if the substring isn't an HTML tag
if (! substr.startsWith("<")){
if (count > length){
continue;
} else if (substr.length > (length-count-1)){
truncated.push(substr.substring(0, (length-count) - 1) + '…');
} else {
truncated.push(substr);
}
count += substr.length;
} else {
truncated.push(substr);
}
}
return `<span title="${noHTML}">${truncated.join("")}…</span>`;
}
示例：
string = "<span class='className'>My long string that</span> I want shorter<span> but just a little bit</span>";
truncateWithHTML(string,10); // "<span title='My long string that I want shorter but just a little bit'><span class='className'>My long s…</span><span></span></span>"
truncateWithHTML(string,22); // "<span title='My long string that I want shorter but just a little bit'><span class='className'>My long string that</span> I…<span></span></span>"
答案 7 :(得分：-3)