Javascript 计算文本块中的字符数并将其拆分为两列
我正在尝试将文本块自动转换为列，因为客户端没有很好的html/CSS 我编写了这个小脚本来搜索div以查找hr标记，并自动向p标记添加一个类Javascript 计算文本块中的字符数并将其拆分为两列,javascript,jquery,count,character,Javascript,Jquery,Count,Character,我正在尝试将文本块自动转换为列，因为客户端没有很好的html/CSS 我编写了这个小脚本来搜索div以查找hr标记，并自动向p标记添加一个类 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> $(document).re
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
if($('#data').find('hr')){
$('hr').prev('p').addClass('left');
$('hr').next('p').addClass('right');
}
});
</script>
</head>
<body>
<div id="data">
<p>This is paragraph 1. Lorem ipsum ... <br /><br />
This is paragraph 2. Lorem ipsum ... <br /><br />
This is paragraph 3. Lorem ipsum ... </p>
<hr />
<p>This is paragraph 4. Lorem ipsum ... <br /><br />
This is paragraph 5. Lorem ipsum ... <br /><br />
This is paragraph 6. Lorem ipsum ... </p>
</div>
$（文档）.ready（函数（）{
如果（$（'#数据'）。查找（'hr'））{
$（'hr'）.prev（'p'）.addClass（'left'）；
$（'hr'）.next（'p'）.addClass（'right'）；
}
});
这是第1段。同侧眼线
这是第2段。同侧眼线
这是第3段。同侧眼线
这是第4段。同侧眼线
这是第5段。同侧眼线
这是第6段。同侧眼线
因此，我需要重写它来计算字符数，并将其平均分割（或尽可能接近左侧较大的部分），但我不知道如何开始。如果你能帮忙，那就太好了 第一件事不应该通过JavaScript/jQuery在呈现给客户机上完成，你不应该构建布局，尽管JavaScript/jQuery只会改进布局 但是对于你的代码，你可以这样做
然后，如果您想让splitChar在句子中中断，您可以将其更改为
“”/**
* Create left and right divs
*/
var $left = $(document.createElement("div")).addClass('left');
var $right = $(document.createElement("div")).addClass('right');
/**
* Store the text lengths into an array
*/
var textLengthArray = [];
var totalLength = 0;
$('p').each(function(){
var $this = $(this);
var text = $this.text();
textLengthArray[textLengthArray.length] = text.length;
totalLength += text.length;
});
/**
* The midpoint is crucial
*/
var midpoint = totalLength / 2;
/**
* pastParagraphs - is the text length of the paragraphs we've already moved
* currentParagraphPos - keeps track of where we are
* split - we only want to split one paragraph in two
*/
var pastParagraphs = 0
var currentParagraphPos = 0;
var split = false;
/**
* iterate over the textLengthArray (i.e. the paragraphs)
* add them to the left until the text length would of all the paragraphs we've moved
* into the left would exceed the midpoint. Then split the paragraph the midpoint falls into
* from there on move paragraphs to the right div.
*/
for (i in textLengthArray) {
/**
* This is the check to insure we aren't past the midpoint
*/
if (pastParagraphs + textLengthArray[currentParagraphPos] < midpoint) {
/**
* Move the first paragraph to the left div.
* We always move the first because they filter down as we remove them.
*/
$left.append($('p').eq(0));
pastParagraphs += textLengthArray[currentParagraphPos];
currentParagraphPos++;
}
else {
/**
* if we haven't split a paragraph already we should split this first paragraph going right in two.
*/
if (!split) {
split = true;
/**
* Create two new paragraphs, one for the left, one for the right
*/
var $goLeft = $(document.createElement("p"));
var $goRight = $(document.createElement("p"));
/**
* The split shouldn't fall in the middle of a word
* so we run a while loop to find the next available space.
*/
var splitIndex = midpoint - pastParagraphs;
var splitPHtml = $('p').eq(0).html();
while (splitPHtml.charAt(splitIndex) != ' ') {
splitIndex++;
}
/**
* As we've created two new paragraphs we need to manually remove this one
*/
$('p').eq(0).remove();
/**
* Add the ontent to our new paragraphs and append them to the left and right divs
*/
$goLeft.html(splitPHtml.substring(0, splitIndex));
$goRight.html(splitPHtml.substring(splitIndex, splitPHtml.length));
$left.append($goLeft);
$right.append($goRight);
}
else {
/**
* Add any further paragraphs to the right div
*/
$right.append($('p').eq(0));
currentParagraphPos++;
}
}
}
/**
* Finally we want to append our divs to the body.
*/
$('body').append($left);
$('body').append($right);
/**
*创建左和右div
*/
var$left=$（document.createElement（“div”））.addClass（“left”）；
var$right=$（document.createElement（“div”））.addClass（“right”）；
/**
*将文本长度存储到数组中
*/
var textLengthArray=[]；
var总长度=0；
$（'p'）。每个（函数（）{
var$this=$（this）；
var text=$this.text（）；
textLengthArray[textLengthArray.length]=text.length；
总长度+=text.length；
});
/**
*中点至关重要
*/
var中点=总长度/2；
/**
*PastPages-是我们已经移动的段落的文本长度
*currentParagraphPos-跟踪我们的位置
*拆分-我们只想将一段拆分为两段
*/
var=0
var currentParagraphPos=0；
var分割=假；
/**
*反复阅读文本Lengtharray（即段落）
*将它们添加到左侧，直到文本长度超过我们移动的所有段落的长度
*进入左边会超过中点。然后将中点所在的段落拆分
*从这里开始，把段落移到右边。
*/
对于（我在textLengthArray中）{
/**
*这是一张支票，以确保我们没有超过中点
*/
如果（过去段落+文本长度数组[当前段落位置]<中点）{
/**
*将第一段移到左分区。
*我们总是先移动它们，因为当我们移除它们时，它们会向下过滤。
*/
$left.append（$（'p'）.eq（0））；
过去段落+=文本长度数组[当前段落位置]；
当前段落POS++；
}
否则{
/**
*如果我们还没有拆分一段，我们应该将第一段拆分成两段。
*/
如果（！拆分）{
split=true；
/**
*创建两个新段落，一个用于左侧，一个用于右侧
*/
var$goLeft=$（document.createElement（“p”）；
var$goRight=$（document.createElement（“p”）；
/**
*分裂不应该在一个词的中间
*因此，我们运行while循环来查找下一个可用空间。
*/
var splitIndex=中点-过去段；
var splitPHtml=$（'p'）.eq（0.html（）；
while（splitPHtml.charAt（splitIndex）！=“”）{
splitIndex++；
}
/**
*由于我们已经创建了两个新段落，我们需要手动删除这一段
*/
$（'p'）.eq（0）.remove（）；
/**
*将内容添加到新段落中，并将其附加到左侧和右侧div
*/
$goLeft.html（splitPHtml.substring（0，splitIndex））；
$goRight.html（splitPHtml.substring（splitIndex，splitPHtml.length））；
$left.append（$goLeft）；
$right.append（$goRight）；
}
否则{
/**
*在右侧div中添加任何其他段落
*/
$right.append（$（'p'）.eq（0））；
当前段落POS++；
}
}
}
/**
*最后，我们要将div附加到主体。
*/
$（'body'）。追加（$left）；
$（'body'）。追加（$right）；