文字竖排转换[HTML版]

跟这里《文字竖排工具的Firefox扩展安装包(支持横竖互换)》用的是相同的核心代码.
[url]http://yeahoo.iteye.com/blog/214518[/url]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文字竖排转换工具(本地版)</title>
<style type="text/css">
*{margin:0; padding:0}
select{padding:3px;}
body,textarea{padding:5px; font:14px/20px '宋体';}
</style>
<script type="text/javascript">
/**
* 文字竖排转换工具
* @author [email]yeahoo2000@gmail.com[/email]
*/
var vPost={
style:[
['┏', '━┓', '━┯', '┗', '━┛', '━┷', '┃', '┆']
,['╔', '═╗', '═╤', '╚', '═╝', '═╧', '║', '┆']
,['┌', '─┐', '─┬', '└', '─┘', '─┴', '│', '┆']
,['', '', '', '', '', '', '┃', '┆']
,['', '', '', '', '', '', '║', '┆']
,['', '', '', '', '', '', '│', '┆']
],

replaces: [
' ',' ', '\\(', '︵', '\\)','︶', '\\[','︻', '\\]', '︼', '\\{','︷', '\\}','︸', '《','︽', '》','︾', '\\^','︿', '—','|', ':','‥', ':','‥', '<','︿', '>','﹀' ,'‘','﹁', '’','﹂', '“','﹃', '”','﹄', '…','┇'
],

/**
* 一些特殊字符的替换操作
* @param string text 内容
* @return string
*/
replace: function(text){
text = text.replace(/\r\n/g, '\n');
text = text.replace(/\n\n/g, '\n');
for(var i=0; i<vPost.replaces.length; i+=2){
text = text.replace(new RegExp(vPost.replaces[i], 'g'), vPost.replaces[i+1]);
}
return text;
},

/**
* 去除头尾的空白字符
* @param string text 内容
* @return string
*/
trim: function(text){
return text.replace(/(^\s*)|(\s*$)/g, '')
},

/**
* 横排文字转成竖排
* @parm string text 内容
* @parm int r 行数
* @parm int c 列数
* @parm int sty 风格
* @return string
*/
convertV: function(text, r, c, sty){
text = vPost.replace(vPost.trim(text));

if(0 == c){ //如果用户选了自动列,则计算列数
c = text.length % r ? parseInt(text.length / r) + 1 : parseInt(text.length / r);
}

do{ //处理换行
var n = text.indexOf('\n');
if(-1 != n){
if(n%r){
var s = '';
for(var i=0; i<(r - n%r); i++){
s += ' ';
}
}
text = text.substr(0, n) + s + text.substr(n+1);
}
}while(-1 != n);

var s = sh = sf = '';
if(vPost.style[sty][0]){
for(var i=0; i<=c; i++){ //处理边框
sh += 0 == i? vPost.style[sty][0]: (c == i ? vPost.style[sty][1] : vPost.style[sty][2]);
sf += 0 == i? vPost.style[sty][3] : (c == i ? vPost.style[sty][4] : vPost.style[sty][5]);
}
}

var p = text.length % (r * c) ? parseInt(text.length / (r * c)) + 1 : parseInt(text.length / (r * c)); //需要分成多少部份?
for(var i=0; i<p; i++){ //处理内容
s += sh? sh + '\n' : '';
for(var j=0; j<r; j++){
for(var k=0; k<c; k++){
s += 0 == k? vPost.style[sty][6] : '';
var t = text.substr(i * c * r + ((c-1)-k) * r + j, 1);
var cc = t.charCodeAt(0);

t = cc < 127? String.fromCharCode(cc + 65248) : t; //将一些特殊字符转换为全角
s += t? t : ' ';
s += c-1 == k? vPost.style[sty][6] :vPost.style[sty][7];
}
s += '\n';
}
s += sf? sf + '\n\n' : '\n';
}
return s.substring(0, s.length -2); //去除最后的两个换行
},

/**
* 竖排文字转成横排
* @parm string text 内容
* @return string
*/
convertH: function(text){
if(!text) return '';
text = text.replace(/\r\n/g, '\n');
text = vPost.trim(text);

var blocks = text.split('\n\n');
var t = blocks[0];
var t = t.split('\n');
var r = t.length;
var c = t[0].length;

var hasHeader = true;
var border = t[0][1];
for(var i=1; i<c - 2; i += 2){ //判断在竖排格式中是否带有头脚边框
if( t[0][i] != border
|| t[0][i] != t[0][i+2]
|| t[r-1][i] != border
|| t[r-1][i] != t[r-1][i+2]
){
hasHeader = false;
break;
}
}
//alert('blocks='+blocks.length + " : r=" + r + ' : c=' + c + ' : isV='+isV+ ' : hasHeader=' + hasHeader);

var isV = true;
var i = hasHeader? 1 : 0;
try{
var split = t[i][2];
for(var j=2; j<c-3; j+=2){ //判断是否竖排格式
if(t[i][j] != split || t[i][j] != t[i][j+2]){
isV = false;
break;
}
}
}catch(e){
isV = false;
}

var s = '';
if(isV){
r = hasHeader? r-1 : r;
for(var i=0; i<blocks.length; i++){
for(var j=c-2; j>0; j-=2){
var k = hasHeader? 1 : 0;
for(; k<r; k++){
var t = blocks[i].substr(k * (c+1) + j, 1)
var cc = t.charCodeAt(0);
t = cc>65248 && cc<65248+127? String.fromCharCode(cc - 65248) : t; //将一些全角字符转换为半角
s += t;
}
}
}

for(var i=0; i<vPost.replaces.length; i+=2){
var rp = vPost.replaces[i].replace(/\\/g, '');
s = s.replace(new RegExp(vPost.replaces[i+1], 'g'), rp);
}

return vPost.trim(s);
}else{
return text;
}
}
}
</script>
</head>
<body>
<textarea id="input" style="width:650px; height:180px;"></textarea>
<p style="font:12px/20px '宋体'; color:#666;">在竖排转横排时,如果待转换的文字是有多块组成的,那么块与块之间必须要有一个空行隔开,否则无法正常转换.</p>
<p style="margin:5px 0;">
<select id="r">
<option value="5">5行</option>
<option value="8">8行</option>
<option value="10" selected="selected">10行</option>
<option value="15">15行</option>
<option value="20">20行</option>
<option value="25">25行</option>
<option value="30">30行</option>
<option value="50">50行</option>
</select>
<select id="c">
<option value="0">自动计算列</option>
<option value="5">5列</option>
<option value="8">8列</option>
<option value="10">10列</option>
<option value="15">15列</option>
<option value="20">20列</option>
<option value="25">25列</option>
<option value="30">30列</option>
<option value="50">50列</option>
</select>
<select id="sty">
<option value="0">粗实线边框</option>
<option value="1">双实线边框</option>
<option value="2">细实线边框</option>
<option value="3">无边框粗实线</option>
<option value="4">无边框双实线</option>
<option value="5">无边框细实线</option>
</select>
<input type="button" onclick="document.getElementById('output').value = vPost.convertV(document.getElementById('input').value, document.getElementById('r').value, document.getElementById('c').value, document.getElementById('sty').value)" value="横排转竖排" style="width:120px; height:28px;" />
<input type="button" onclick="document.getElementById('output').value = vPost.convertH(document.getElementById('input').value)" value="竖排转横排" style="width:120px; height:28px;" />
</p>
<textarea id="output" style="width:650px; height:400px;"></textarea>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值