Javascript 调查结果；换行符“；在文本区域中，该区域是单词包装的阿拉伯语文本
我有一个文本字符串，显示在文本区域（从右到左的方向）。用户可以动态调整textarea的大小（我使用jquery），文本将根据需要进行换行 当用户点击submit时，我将获取该文本并使用PHP创建一个图像，但在提交之前，我想知道“换行”或“换行”发生在哪里 到目前为止，我所看到的所有地方都只向我展示了如何在php端处理换行符。我想说清楚，没有换行。我拥有的是一个长字符串，它将根据用户设置的文本区域的宽度以不同的方式进行文字包装 我不能使用“列”或任何其他标准宽度表示法，因为我有一个非常复杂的阿拉伯语字体，它实际上由许多不同宽度的字形（字符）组成 如果有人知道如何访问换行符出现的位置（如果需要，可以在文本区域或div中），我真的很想知道 我唯一的另一个解决方案是（在我的数据库中）实际存储每个字符的宽度（有点乏味，因为600种不同的字体中有200多个字符，总共…一些巨大的数字） 我的希望不高，但我想我会问 谢谢Javascript 调查结果；换行符“；在文本区域中，该区域是单词包装的阿拉伯语文本,javascript,textarea,word-wrap,Javascript,Textarea,Word Wrap,我有一个文本字符串，显示在文本区域（从右到左的方向）。用户可以动态调整textarea的大小（我使用jquery），文本将根据需要进行换行 当用户点击submit时，我将获取该文本并使用PHP创建一个图像，但在提交之前，我想知道“换行”或“换行”发生在哪里 到目前为止，我所看到的所有地方都只向我展示了如何在php端处理换行符。我想说清楚，没有换行。我拥有的是一个长字符串，它将根据用户设置的文本区域的宽度以不同的方式进行文字包装 我不能使用“列”或任何其他标准宽度表示法，因为我有一个非常复杂的阿拉
一,。jamal好吧，您可以使用以下功能强制换行符进入文本区域，而不是查找换行符（这几乎是不可能的）：
function ApplyLineBreaks(strTextAreaId) {
var oTextarea = document.getElementById(strTextAreaId);
if (oTextarea.wrap) {
oTextarea.setAttribute("wrap", "off");
}
else {
oTextarea.setAttribute("wrap", "off");
var newArea = oTextarea.cloneNode(true);
newArea.value = oTextarea.value;
oTextarea.parentNode.replaceChild(newArea, oTextarea);
oTextarea = newArea;
}
var strRawValue = oTextarea.value;
oTextarea.value = "";
var nEmptyWidth = oTextarea.scrollWidth;
var nLastWrappingIndex = -1;
for (var i = 0; i < strRawValue.length; i++) {
var curChar = strRawValue.charAt(i);
if (curChar == ' ' || curChar == '-' || curChar == '+')
nLastWrappingIndex = i;
oTextarea.value += curChar;
if (oTextarea.scrollWidth > nEmptyWidth) {
var buffer = "";
if (nLastWrappingIndex >= 0) {
for (var j = nLastWrappingIndex + 1; j < i; j++)
buffer += strRawValue.charAt(j);
nLastWrappingIndex = -1;
}
buffer += curChar;
oTextarea.value = oTextarea.value.substr(0, oTextarea.value.length - buffer.length);
oTextarea.value += "\n" + buffer;
}
}
oTextarea.setAttribute("wrap", "");
}
函数ApplyLineBreaks（strTextAreaId）{
var oTextarea=document.getElementById（strTextAreaId）；
if（oTextarea.wrap）{
setAttribute（“wrap”、“off”）；
}
否则{
setAttribute（“wrap”、“off”）；
var newArea=oTextarea.cloneNode（真）；
newArea.value=oTextarea.value；
oTextarea.parentNode.replaceChild（newArea，oTextarea）；
oTextarea=新区域；
}
var strawvalue=oTextarea.value；
oTextarea.value=“”；
var nEmptyWidth=oTextarea.scrollWidth；
var nLastWrappingIndex=-1；
对于（变量i=0；inEmptyWidth）{
var buffer=“”；
如果（nLastWrappingIndex>=0）{
对于（var j=nLastWrappingIndex+1；j IE、Chrome和Firefox测试成功，请在这里自由观看：（预览将显示新行）由于某种原因，我在更新此帖子时从未收到通知……昨晚，我有了一个关于如何确定换行位置的绝妙主意。。。 我会重新构建字符串，每次都检查宽度，结果成功了 所以我来这里分享…发现我落后了一个星期 无论如何，有两件事很重要
.inputArea {
width:200px;
height:100px;
font-family:Arial;
font-size:12px;
overflow: auto;
border: 1px solid #cccccc;
padding:0;
margin:0;
}
.divArea {
font-family:Arial;
font-size:12px;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js
"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#breakUp").click(function () {
showLineBreaks();
addLineBreaks();
});
function showLineBreaks() {
content = $("#textEntered").val();
//replace line breaks in content with "|" to allow for replacement below
content = content.replace("\r\n", "
");
content = content.replace("\r", "
");
content = content.replace("\n", "
");
$("#unedited").html(content);
}
function addLineBreaks() {
content = $("#textEntered").val();
//replace line breaks in content with "|" to allow for replacement below
content = content.replace("\r\n", "|");
content = content.replace("\r", "|");
content = content.replace("\n", "|");
tempContent = "";
$("#edited").html("");
for (var i = 0; i ");
} else {
tempContent = $("#edited").html();
$("#edited").html(tempContent + content.charAt(i));
if ($("#edited").width() > 200) {
$("#edited").html(tempContent + "
" + content.charAt(i));
}
}
}
}
});
<script>
$（文档）.ready（函数（）{
$（“#分解”）。单击（函数（）{
showLineBreaks（）；
addLineBreaks（）；
});
函数showLineBreaks（）{
content=$（“#textcentered”）.val（）；
//将内容中的换行符替换为“|”，以便在下面进行替换
内容=内容。替换（“\r\n”和“
”）；
内容=内容。替换（“\r”和“
”）；
内容=内容。替换（“\n”和“
”）；
$（“#未经编辑”）.html（内容）；
}
函数addLineBreaks（）{
content=$（“#textcentered”）.val（）；
//将内容中的换行符替换为“|”，以便在下面进行替换
content=content.replace（“\r\n”，“|”）；
content=content.replace（“\r”和“|”）；
内容=内容。替换（“\n”和“|”）；
tempContent=“”；
$（“#编辑”）.html（“”）；
对于（var i=0；i”）；
}否则{
tempContent=$（“#编辑”）.html（）；
$（“#编辑”）.html（tempContent+content.charAt（i））；
如果（$（“#编辑”）.width（）>200）{
$（“#编辑”）.html（tempContent+”
“+content.charAt（i））；
}
}
}
}
});
Enter text into the textarea below (Set to 200 px width, 100 px height)<br>
<textarea id="textEntered" class="inputArea"></textarea>
<br><br>
The div below will display that text WITHOUT wrapping, BUT replacing all existing line breaks with <br><br>
<div id="unedited"></div>
<br>
The following div will display that text with line breaks ADDED to fit the wrapping<br>
<div class="divArea"><span id="edited"></span></div>
<br>
<button id="breakUp">Click Here to Convert</button>
在下面的文本区域中输入文本（设置为200像素宽，100像素高）
下面的div将显示该文本而不进行换行，但将所有现有换行符替换为
以下div将显示添加了换行符的文本，以适合换行
单击此处转换<textarea id='yourTextArea' wrap='hard'></textarea>
function ApplyLineBreaks(strTextAreaId) {
var oTextarea = document.getElementById(strTextAreaId);
if (oTextarea.wrap) {
oTextarea.setAttribute("wrap", "off");
}
else {
oTextarea.setAttribute("wrap", "off");
var newArea = oTextarea.cloneNode(true);
newArea.value = oTextarea.value;
oTextarea.parentNode.replaceChild(newArea, oTextarea);
oTextarea = newArea;
}
var strRawValue = oTextarea.value;
oTextarea.value = "";
var nEmptyWidth = oTextarea.scrollWidth;
function testBreak(strTest) {
oTextarea.value = strTest;
return oTextarea.scrollWidth > nEmptyWidth;
}
function findNextBreakLength(strSource, nLeft, nRight) {
var nCurrent;
if(typeof(nLeft) == 'undefined') {
nLeft = 0;
nRight = -1;
nCurrent = 64;
}
else {
if (nRight == -1)
nCurrent = nLeft * 2;
else if (nRight - nLeft <= 1)
return Math.max(2, nRight);
else
nCurrent = nLeft + (nRight - nLeft) / 2;
}
var strTest = strSource.substr(0, nCurrent);
var bLonger = testBreak(strTest);
if(bLonger)
nRight = nCurrent;
else
{
if(nCurrent >= strSource.length)
return null;
nLeft = nCurrent;
}
return findNextBreakLength(strSource, nLeft, nRight);
}
var i = 0, j;
var strNewValue = "";
while (i < strRawValue.length) {
var breakOffset = findNextBreakLength(strRawValue.substr(i));
if (breakOffset === null) {
strNewValue += strRawValue.substr(i);
break;
}
var nLineLength = breakOffset - 1;
for (j = nLineLength - 1; j >= 0; j--) {
var curChar = strRawValue.charAt(i + j);
if (curChar == ' ' || curChar == '-' || curChar == '+') {
nLineLength = j + 1;
break;
}
}
strNewValue += strRawValue.substr(i, nLineLength) + "\n";
i += nLineLength;
}
oTextarea.value = strNewValue;
oTextarea.setAttribute("wrap", "");
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<%--//definimos un estilo--%>
<STYLE type="text/css">
#CadTemp
{
font-family: "Arial", serif;
font-size: 12pt;
visibility: hidden;
position: absolute;
top: -100;
left: 0px;
}
</STYLE>
<script type="text/javascript">
function mostrar() {
return 'ancho cadena: ' + document.getElementById('myTextarea').value.visualLength() + ' \n' + 'ancho textarea: ' + (document.getElementById('myTextarea').scrollWidth -4);
}
//sustituimos el espacio en blanco por el punto, tienen exactamente el mismo tamaño en 'pixeles'
function reemplazarEspacios(texto) {
var devolver = "";
for (var i = 0; i < texto.length; i++) {
if (texto.charAt(i) == ' ') {
devolver += '.'
} else {
devolver += texto.charAt(i);
}
}
return devolver;
}
// Calcula los pixeles de ancho que ocupa un texto (la cadena debe tener el mismo tamaño y tipo de fuente)
String.prototype.visualLength = function () {
var ruler = document.getElementById("CadTemp");
ruler.innerHTML = reemplazarEspacios(this)
return ruler.offsetWidth;
}
//quitar espacios a la derecha de la cadena
String.prototype.rtrim = function() {return this.replace(/\s+$/,"");}
//devuelve el ultimo espacio de la cadena (que no sea espacio final)
function IndEspacio(cadena) {
//quito los espacios al final
var cadenaTemp = cadena.rtrim();
return cadenaTemp.lastIndexOf(' ');
}
//insertar un salto de linea
function AplicarSaltosLinea(ID_elemento) {
//guardo el elemento web en una variable
var TextArea = document.getElementById(ID_elemento);
var cadenaTexto = "";
var Cadenafinal = "";
var buffer = "";
//recorremos toda la cadena
for (var i = 0; i < TextArea.value.length; i++) {
//guardamos el caracater en la cadena
cadenaTexto += TextArea.value.charAt(i);
//si hay un retorno de carro, antes de llegar al final del textArea
if (TextArea.value.charAt(i) == '\n') {
Cadenafinal += cadenaTexto.substr(0, cadenaTexto.lastIndexOf('\n') + 1) ;
cadenaTexto = "";
}
//si el ancho actual de la cadena es mayor o igual que el ancho del textarea (medida pixeles)
if (cadenaTexto.visualLength() > TextArea.scrollWidth - 4) {
//recuperamos el ultimo espacio en blanco antes de la ultima letra o palabra
var indiceEspacio = IndEspacio(cadenaTexto)
buffer = "";
//ultimo espacio en blanco detectado, metemos el trozo de palabra desde el ultimo espacio
if (indiceEspacio >= 0) {
for (var j = indiceEspacio + 1; j <= i; j++)
buffer += cadenaTexto.charAt(j);
indiceEspacio = -1;
} else {
buffer += TextArea.value.charAt(i);
}
//coloca la cadena
Cadenafinal += cadenaTexto.substr(0, cadenaTexto.length - buffer.length) + "\n";
cadenaTexto = buffer;
}
}
Cadenafinal += cadenaTexto;
document.getElementById("pnlPreview").innerHTML = Cadenafinal.replace(new RegExp("\\n", "g"), "<br />");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<span id="CadTemp">hola</span>
</div>
<br />
<div>
<textarea cols="20" rows="5" id="myTextarea" wrap="hard"
style="font-family: Arial, Helvetica, sans-serif; font-size: 12pt"></textarea>
</div>
<div id="pnlPreview"></div>
<div>
<button type="button" onclick="AplicarSaltosLinea('myTextarea');">Apply Line Breaks</button>
<button type="button" onclick="alert( document.getElementById('myTextarea').value )">mensaje</button>
<button type="button" onclick="alert( mostrar())">calcular Ancho Pixel</button>
<br />
</div>
</form>
</body>
</html>
function get_row_wraps(txtArea){
if(wrap=="off"){
var out=[];
for(var i=txtArea.split_lines.length; i>=0; --i)
out[i]=1;
return out;
}
var its=txtArea.value.split("\n");
var newArea = txtArea.cloneNode(true);
newArea.hidden=true;
newArea.style.visibility = "hidden";
txtArea.parentNode.appendChild(newArea);
// get single row height
newArea.style.height="auto";
newArea.style.overflowY="scroll";
newArea.value="1\n2\n3";
var unit_height=newArea.scrollHeight;
newArea.value="1\n2\n3\n4";
var unit_height=newArea.scrollHeight-unit_height;
newArea.style.height=Math.round(unit_height*1.5)+"px"; // so that the scrollbar does not vanish
newArea.value="";
// obtain row height for every line of text
function comp_Nrow(scroll_height){
return Math.floor(scroll_height/unit_height);
}
function calc_rows(txt){
newArea.value+=txt;
return comp_Nrow(newArea.scrollHeight);
}
var out=[];
for(var i=0; i<its.length; i++)
out.push(calc_rows(i==0?its[i]:("\n"+its[i])));
txtArea.parentNode.removeChild(newArea);
for(var i=out.length-1; i>0; i--)
out[i]-=out[i-1];
// alert(out);
return out;
}
function applyLineBreaks = function(strTextAreaId) {
// Get txtarea
var oTextarea = document.getElementById(strTextAreaId);
// Disable textarea wrap
oTextarea.setAttribute("wrap", "off");
// Split the characters into an array
var aWords = oTextarea.value.split(' ');
// Empty the textarea
oTextarea.value = "";
// Get textarea scrollwidth
var nEmptyWidth = oTextarea.scrollWidth;
// Start looping over the words
for(var i = 0; i < aWords.length; i++)
{
if(i > 1000)
{
break;
}
var curWord = aWords[i] + ' ';
// Add character to textarea
oTextarea.value += curWord;
// console.log(oTextarea.scrollWidth, nEmptyWidth);
if(oTextarea.scrollWidth > nEmptyWidth)
{
let oldVal = oTextarea.value;
let newVal = oldVal.substring(0, (oldVal.length - (curWord.length + 1))) + "\n" + curWord;
oTextarea.value = newVal;
}
}
oTextarea.setAttribute("wrap", "");
return oTextarea.value;
};