在textarea中查找带有javascript的呈现换行符位置

Question

我有一个文本区：

<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) != '\r\n' && 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;
}

我想找出宽度大小的断行字符的动态换行索引，是指当我们水平地调整文本区域的大小时，它应该再次呈现换行，所以我们计算出来的新的换行索引也应该更改。

​

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，因此我没有足够的点，我不能在评论中提出，所以我已经开始了这个新的问题。

Answer 1

有了安拉的意愿，我已经解决了我的问题:将textarea值复制到新位置，固定div，然后计算该div中呈现的换行，以及更多(将呈现的每一行返回为字符串数组中的字符串)，在其他堆栈溢出答复的帮助下这样做。

但是他们的方法不适合像我在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>

​

Answer 2

不能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>

​