作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个用户输入的内容,可以是任何类型的文本。
例如
This is some sample text. I can use special characters like <>&<>&<>&<>&<>&<>&<>&<>&<>&<>&
然后,我在网格中显示此内容,其中文本被 chop 为 80 个字符(以适合可用空间),如果用户将鼠标悬停在文本上,他们可以看到完整的字符串。
我有一个函数可以为我执行此操作。
function GetDescriptionContent(data, type, row){
return
"<span title='" + data.replace(/'/g, ''') + "'>" +
$('<div/>').text(data).html().substring(0, 80) +
"</span>";
}
但是,当我对 html 进行子串化时,有时会剪切特殊字符,例如 &
<
>
此外,当字符串中存在特殊字符时,它会过早地切断字符串,否则字符串的长度可能没问题。
如何在 JavaScript 中巧妙地 chop HTML 字符串?
最佳答案
我发现我可以跟踪 html 实体并调整 chop 长度。
function truncateToLength(
stringToTruncate,
truncationLength,
truncationCharacter = "…")
{
//string is too small, does not need to be truncated
if(stringToTruncate.length <= truncationLength){
return stringToTruncate;
}
//find all html entities
var splitOnAmpersandArray = stringToTruncate.split('&');
//first instance of html entity is beyond our truncation length
//return what we have plus truncation character
if(splitOnAmpersandArray[0].length > truncationLength){
return splitOnAmpersandArray[0].substring(0, truncationLength)
+ truncationCharacter;
}
//first instance of html entity is inside our truncation length
var truncatedString = splitOnAmpersandArray[0];
//keep adding onto truncated string until:
// it is longer than our length or
// we are out of characters to add on.
for(var i = 1; i < splitOnAmpersandArray.length; i++){
//find end of current html entity
var htmlEntityLength = splitOnAmpersandArray[i].indexOf(';');
//increase truncation length to account for size of current html entity
truncationLength += htmlEntityLength + 1;
//add up until next html entity
truncatedString = truncatedString + '&' + splitOnAmpersandArray[i];
//if our new length is too long, truncate and add truncation character
if(truncatedString.length >= truncationLength){
return truncatedString.substring(0,truncationLength)
+ truncationCharacter;
}
}
//we ran out of characters to add onto string, return result
return truncatedString;
}
var content = " &><"'¢£¥€©®";
$('#sample').html(truncateToLength(content, 5));
$('#sample').prop('title', $('<div/>').html(content).text());
function truncateToLength(
stringToTruncate,
truncationLength,
truncationCharacter = "…")
{
//string is too small, does not need to be truncated
if(stringToTruncate.length <= truncationLength){
return stringToTruncate;
}
//find all html entities
var splitOnAmpersandArray = stringToTruncate.split('&');
//first instance of html entity is beyond our truncation length
//return what we have plus truncation character
if(splitOnAmpersandArray[0].length > truncationLength){
return splitOnAmpersandArray[0].substring(0, truncationLength)
+ truncationCharacter;
}
//first instance of html entity is inside our truncation length
var truncatedString = splitOnAmpersandArray[0];
//keep adding onto truncated string until:
// it is longer than our length or
// we are out of characters to add on.
for(var i = 1; i < splitOnAmpersandArray.length; i++){
//find end of current html entity
var htmlEntityLength = splitOnAmpersandArray[i].indexOf(';');
//increase truncation length to account for size of current html entity
truncationLength += htmlEntityLength + 1;
//add up until next html entity
truncatedString = truncatedString + '&' + splitOnAmpersandArray[i];
//if our new length is too long, truncate and add truncation character
if(truncatedString.length >= truncationLength){
return truncatedString.substring(0,truncationLength)
+ truncationCharacter;
}
}
//we ran out of characters to add onto string, return result
return truncatedString;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sample"></div>
关于javascript - 如何在 JavaScript 中巧妙地 chop HTML 字符串?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22821622/
我是一名优秀的程序员,十分优秀!