我有这个textarea:
<textarea id="ifade" rows="6" cols="66" placeholder="...Start Writing in Arabic"></textarea>
和我试图在正常换行符('n')和呈现的换行符(或者如果我可以插入'n'字符来呈现的换行符，但我也不能这样做…)
var remainedPlace;
var inputValue = $("#textarea").val();
for (var j = 0; j < inputValue.length; j++) // from start of the textarea to the end of textarea ...
{
// I cannot detect rendered newlines below..:
for (var k = j; inputValue.charAt(k) != 'rn' && inputValue.charAt(k) != 'r' && inputValue.charAt(k) != 'n'; k++) // from start of that line to the end of that line ...
{
/* doing some un-important stuff here:
for(var l = 0; l < selections.length; l++) // from selected letters
{
if(inputValue.charAt(k) == selections[l]) // every selected letters
lineSums[line]++; // increment as count in that line
remainedPlace = k;
}
*/
}
line++;
j = ++remainedPlace;
}
我想找出换行字符的宽度-大小动态断行索引意味着当我们水平调整textarea的大小时它会再次显示换行符所以我们计算的新换行符索引也会改变
This textarea has less 2 rendered line-breaks:<br>
<textarea rows="3" cols="66">this text will broke/render new line breaks according to textarea width even though I have never used 'n' in it character, I want to find out that rendered line break indexes created according to textarea width</textarea>
<br><br>This textarea has less 6 rendered line-breaks:<br>
<textarea rows="7" cols="23">this text will broke/render new line breaks according to textarea width even though I have never used 'n' in it character, I want to find out that rendered line break indexes created according to textarea width</textarea>这个(找到用javascript渲染的换行符)问题似乎相似，但它不适用于textarea，因此我没有足够的点，我不能在评论中问，所以我打开了这个新问题。
不能100%确定您究竟需要什么作为返回—我假设它是每个换行符的索引。如果没有，请评论我的回答让我知道。
详细信息在下面的示例中被注释
// Get the text via HTMLFormElement interface
let txt = document.forms[0].elements[0].value;
// Create a RegExp object to match new lines
const rgx = new RegExp(/n/, 'g');
/*
Run .matchAll() which returns an object
Wrap it in array brackets and apply the
...spread operator in order to access it.
Run the array through .map() and return
each match's .index value.
*/
let matches = [...txt.matchAll(rgx)];
matches = matches.map(match => match.index);
console.log(matches);.as-console-row::after { width: 0; font-size: 0; }
.as-console-row-code { width: 100%; word-break: break-word; }
.as-console-wrapper { min-height: 100% !important; max-width: 30%; margin-left: 70%; }<form>
<textarea rows='10' cols='50'>
Alan Rails, ladies and gentlemen. After his parents' tragic death in a railroad accident, he gained the power to summon ghost trains. It's not all bad though, they were spared having to see their grown son wear a whistle.
They're not infinite universes left in sync with the show.
Are you hungry for apples? ARE YOU HUNGRY FOR APPLESSS!?
Wha, me irresponsible ?! All I wanted you to do was to hand me a screwdriver, Morty!
</textarea>
</form>我已经修复了复制textarea值到新位置的问题，固定了div，然后计算在该div中呈现的换行符以及更多(返回呈现的每行作为字符串数组中的字符串)像这样在其他Stack Overflow reply的帮助下。
但是他们的方法对于像我在MuqattaCounter.github.io中一样具有从右到左和从左到右内容的文本并不好，所以我对它进行了一点更改，现在它从上到下看，以便找到新的渲染行，并且不影响rtl或ltr文本，它可以同时处理它们。
为了看到真正的console.log结果，首先点击"运行代码片段"然后点击"整页"然后调整页面的大小
$(window).resize(function(){
console.log(getLineBreaks(document.querySelector('.copiedText')));
});
function getLineBreaks(elem) {
// our Range object form which we'll get the characters positions
const range = document.createRange();
// here we'll store all our lines
const lines = [];
const nodes = grabTextNodes(elem);
let bottom = 0;
// initial position
let prevBottom = null;
let lineText = "";
let startRange = null;
for (const node of nodes) {
let nodeText = node.textContent;
const textLength = nodeText.length;
let rangeIndex = 0;
let textIndex = 0;
while (rangeIndex <= textLength) {
range.setStart(node, rangeIndex);
if (rangeIndex < textLength - 1) {
range.setEnd(node, rangeIndex + 1); // wrap the range (for Chrome...)
}
bottom = range.getBoundingClientRect().bottom;
if (prevBottom === null) { // first pass
prevBottom = bottom;
startRange = range.cloneRange();
}
else if (bottom > prevBottom) { // line break
// store the current line content
lineText += nodeText.slice(0, textIndex);
startRange.setEnd(range.endContainer, range.endOffset);
const { bottom } = startRange.getBoundingClientRect();
lines.push(lineText);
// start a new line
prevBottom = bottom;
lineText = "";
nodeText = nodeText.slice(textIndex);
textIndex = 0;
startRange = range.cloneRange();
}
rangeIndex++;
textIndex++;
prevBottom = bottom;
}
// add the remaining text from this node into the current line content
lineText += nodeText;
}
// push the last line
startRange.setEnd(range.endContainer, range.endOffset);
//const { bottom } = startRange.getBoundingClientRect();
lines.push(lineText);
return lines;
}
function grabTextNodes(elem) {
const walker = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT, null);
const nodes = [];
while (walker.nextNode()) {
nodes.push(walker.currentNode);
}
return nodes;
}#copyText{
display:inline-block;
width: 361 px !important;
white-space: pre-wrap !important;
word-wrap: break-word !important;
position: fixed;
overflow: hidden !important;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="copyText" class="copiedText">13:0 بسم الله الرحمن الرحيم
13:1 المر تلك ءايت الكتب والذى أنزل إليك من ربك الحق ولكن أكثر الناس لا يؤمنون
13:2 الله الذى رفع السموت بغير عمد ترونها ثم استوى على العرش وسخر الشمس والقمر كل يجرى لأجل مسمى يدبر الأمر يفصل الءايت لعلكم بلقاء ربكم توقنون
13:3 وهو الذى مد الأرض وجعل فيها روسى وأنهرا ومن كل الثمرت جعل فيها زوجين اثنين يغشى اليل النهار إن فى ذلك لءايت لقوم يتفكرون
13:4 وفى الأرض قطع متجورت وجنت من أعنب وزرع ونخيل صنون وغير صنون يسقى بماء واحد ونفضل بعضها على بعض فى الأكل إن فى ذلك لءايت لقوم يعقلون
13:5 وإن تعجب فعجب قولهم أءذا كنا تربا أءنا لفى خلق جديد أولئك الذين كفروا بربهم وأولئك الأغلل فى أعنقهم وأولئك أصحب النار هم فيها خلدون
13:6 ويستعجلونك بالسيئة قبل الحسنة وقد خلت من قبلهم المثلت وإن ربك لذو مغفرة للناس على ظلمهم وإن ربك لشديد العقاب
13:7 ويقول الذين كفروا لولا أنزل عليه ءاية من ربه إنما أنت منذر ولكل قوم هاد
13:8 الله يعلم ما تحمل كل أنثى وما تغيض الأرحام وما تزداد وكل شىء عنده بمقدار
13:9 علم الغيب والشهدة الكبير المتعال
13:10 سواء منكم من أسر القول ومن جهر به ومن هو مستخف باليل وسارب بالنهار
13:11 له معقبت من بين يديه ومن خلفه يحفظونه من أمر الله إن الله لا يغير ما بقوم حتى يغيروا ما بأنفسهم وإذا أراد الله بقوم سوءا فلا مرد له وما لهم من دونه من وال
13:12 هو الذى يريكم البرق خوفا وطمعا وينشئ السحاب الثقال
13:13 ويسبح الرعد بحمده والملئكة من خيفته ويرسل الصوعق فيصيب بها من يشاء وهم يجدلون فى الله وهو شديد المحال
13:14 له دعوة الحق والذين يدعون من دونه لا يستجيبون لهم بشىء إلا كبسط كفيه إلى الماء ليبلغ فاه وما هو ببلغه وما دعؤا الكفرين إلا فى ضلل
13:15 ولله يسجد من فى السموت والأرض طوعا وكرها وظللهم بالغدو والءاصال
13:16 قل من رب السموت والأرض قل الله قل أفاتخذتم من دونه أولياء لا يملكون لأنفسهم نفعا ولا ضرا قل هل يستوى الأعمى والبصير أم هل تستوى الظلمت والنور أم جعلوا لله شركاء خلقوا كخلقه فتشبه الخلق عليهم قل الله خلق كل شىء وهو واحد القهر
13:17 أنزل من السماء ماء فسالت أودية بقدرها فاحتمل السيل زبدا رابيا ومما يوقدون عليه فى النار ابتغاء حلية أو متع زبد مثله كذلك يضرب الله الحق والبطل فأما الزبد فيذهب جفاء وأما ما ينفع الناس فيمكث فى الأرض كذلك يضرب الله الأمثل
13:18 للذين استجابوا لربهم الحسنى والذين لم يستجيبوا له لو أن لهم ما فى الأرض جميعا ومثله معه لافتدوا به أولئك لهم سوء الحساب ومأوىهم جهنم وبئس المهاد
13:19 أفمن يعلم أنما أنزل إليك من ربك الحق كمن هو أعمى إنما يتذكر أولوا الألبب
13:20 الذين يوفون بعهد الله ولا ينقضون الميثق
13:21 والذين يصلون ما أمر الله به أن يوصل ويخشون ربهم ويخافون سوء الحساب
13:22 والذين صبروا ابتغاء وجه ربهم وأقاموا الصلوة وأنفقوا مما رزقنهم سرا وعلانية ويدرءون بالحسنة السيئة أولئك لهم عقبى الدار
13:23 جنت عدن يدخلونها ومن صلح من ءابائهم وأزوجهم وذريتهم والملئكة يدخلون عليهم من كل باب
13:24 سلم عليكم بما صبرتم فنعم عقبى الدار
13:25 والذين ينقضون عهد الله من بعد ميثقه ويقطعون ما أمر الله به أن يوصل ويفسدون فى الأرض أولئك لهم اللعنة ولهم سوء الدار
13:26 الله يبسط الرزق لمن يشاء ويقدر وفرحوا بالحيوة الدنيا وما الحيوة الدنيا فى الءاخرة إلا متع
13:27 ويقول الذين كفروا لولا أنزل عليه ءاية من ربه قل إن الله يضل من يشاء ويهدى إليه من أناب
13:28 الذين ءامنوا وتطمئن قلوبهم بذكر الله ألا بذكر الله تطمئن القلوب
13:29 الذين ءامنوا وعملوا الصلحت طوبى لهم وحسن مءاب
13:30 كذلك أرسلنك فى أمة قد خلت من قبلها أمم لتتلوا عليهم الذى أوحينا إليك وهم يكفرون بالرحمن قل هو ربى لا إله إلا هو عليه توكلت وإليه متاب
13:31 ولو أن قرءانا سيرت به الجبال أو قطعت به الأرض أو كلم به الموتى بل لله الأمر جميعا أفلم يايءس الذين ءامنوا أن لو يشاء الله لهدى الناس جميعا ولا يزال الذين كفروا تصيبهم بما صنعوا قارعة أو تحل قريبا من دارهم حتى يأتى وعد الله إن الله لا يخلف الميعاد
13:32 ولقد استهزئ برسل من قبلك فأمليت للذين كفروا ثم أخذتهم فكيف كان عقاب
13:33 أفمن هو قائم على كل نفس بما كسبت وجعلوا لله شركاء قل سموهم أم تنبءونه بما لا يعلم فى الأرض أم بظهر من القول بل زين للذين كفروا مكرهم وصدوا عن السبيل ومن يضلل الله فما له من هاد
13:34 لهم عذاب فى الحيوة الدنيا ولعذاب الءاخرة أشق وما لهم من الله من واق
13:35 مثل الجنة التى وعد المتقون تجرى من تحتها الأنهر أكلها دائم وظلها تلك عقبى الذين اتقوا وعقبى الكفرين النار
13:36 والذين ءاتينهم الكتب يفرحون بما أنزل إليك ومن الأحزاب من ينكر بعضه قل إنما أمرت أن أعبد الله ولا أشرك به إليه أدعوا وإليه مءاب
13:37 وكذلك أنزلنه حكما عربيا ولئن اتبعت أهواءهم بعد ما جاءك من العلم ما لك من الله من ولى ولا واق
13:38 ولقد أرسلنا رسلا من قبلك وجعلنا لهم أزوجا وذرية وما كان لرسول أن يأتى بءاية إلا بإذن الله لكل أجل كتاب
13:39 يمحوا الله ما يشاء ويثبت وعنده أم الكتب
13:40 وإن ما نرينك بعض الذى نعدهم أو نتوفينك فإنما عليك البلغ وعلينا الحساب
13:41 أولم يروا أنا نأتى الأرض ننقصها من أطرافها والله يحكم لا معقب لحكمه وهو سريع الحساب
13:42 وقد مكر الذين من قبلهم فلله المكر جميعا يعلم ما تكسب كل نفس وسيعلم الكفر لمن عقبى الدار
13:43 ويقول الذين كفروا لست مرسلا قل كفى بالله شهيدا بينى وبينكم ومن عنده علم الكتب
</div>