كيفية التعامل مع عقدة النص الذي يأتي ولي الأمر

أعرض موقعًا على الويب وأحصل على عنصر مثل هذا

<td>
                                Hometown/High School:
"                                                                                                  
                                                                                                            Austin, TX
                                                        /
                                                                                        Westwood
                                                                                                    "</td>

Problem is when I'm manipulating the text nodes, i get a node like--> "

                                                                                                            Austin, TX
                                                        /
                                                                                        Westwood

"

Its parent comes null. And I want to split this text on '/' and replace it with tags like Austin,Tx Westwood

ولكن غير قادر على القيام بذلك Coz الأصل الأم عقدة النص قادم ، غير قادر على حساب xpath الخاص به.

EDIT: الكود الذي أستخدمه لتقسيم واستبدال النص

let parent = textnodeStr.parentElement;//textnodeStr == the text node element
        if(parent != null){
            parent.innerHTML = '';
            let elements = [];
            for (var j=0; j< arr.length; j++){ //arr is the array which contains ['Austin, Tx', 'Westwood'] i.e. the substrings I get After I split the above textnode using '/'
                elements[j] = document.createElement("rtechContainer");
                newText = document.createTextNode(arr[j]);
                elements[j].appendChild(newText);
                parent.appendChild(elements[j])
            }
        }

ADDITIONAL INFO I am usinf createTreeWalker to access the text nodes. Here's a log of what I am doing.

  1. باستخدام createTreeWalker الوصول إلى عقد النص.
  2. استنادًا إلى بعض الشروط ، يتم تخزين النصوص النصية المحددة في مصفوفة (على سبيل المثال ، صفيف selectTextNodes).
  3. عندما ينتهي treeWalker من تنفيذه ، اتصل بوظيفة أخرى أتصل من خلالها إلى الصفيف المذكور سابقًا (selectTextNodes).
  4. الآن داخل الدالة ، أقوم بالتكرار فوق الصفيف وحاول الوصول إلى parentNode لكل عنصر. هذا ما يحدث.

للعقدة النصية text1 in

<td> "text1" </td>

أحصل على العقدة الرئيسية في وظيفتي.

للعقدة النصية text2 in

<td>" text2 "</td>

أحصل على الوالد null في وظيفتي.

ومع ذلك ، يمكنني الحصول على الآباء الصحيحين المطلوبة عند الوصول إلى parentNode من هذين العقدتين النصية في createTreeWalker نفسها.

0
لقد قمت بتحرير سؤالي ، أرجوك دعني أعرف ما الذي تريده فيه. أعتقد أنه سؤال واضح وجميل من نهايتي.
وأضاف المؤلف Tripti Rawat, مصدر
Justinas أي إشارة لذلك؟
وأضاف المؤلف Tripti Rawat, مصدر
لفها في الوالدين الظاهري
وأضاف المؤلف Justinas, مصدر
يمكنك تنسيق الرمز؟
وأضاف المؤلف brk, مصدر
وتوفير عينة رمز العمل
وأضاف المؤلف LGSon, مصدر
parentElement غير مدعوم على جميع المتصفحات. يمكن محاولة parentNode. ومع ذلك ، إذا كنت ترغب فقط في محتوى "Austin Tx/Westwood" ، يمكنك فقط إجراء textnodeStr.textContent.
وأضاف المؤلف Lain, مصدر

1 إجابة

للقيام بذلك لا تحتاج إلى العنصر الأصل. تحتاج فقط إلى محتوى النص الخاص بعناصر "rtechcontainer" الخاصة بك. أيضًا parentElement غير معتمد في كل متصفح (يجب أن يكون parentNode).

تفسيرات في التعليقات:

<html>
    <head>
        <script>
            //Just an event bound to load, for testing
            window.onload = function(){
                //Grabbing all elements with the tagnaname 'rtechcontainer'
                for(var tL=document.querySelectorAll('rtechcontainer'), i=0, j=tL.length; iAustin,Tx Westwood
                    //First we clear the element
                    tL[i].innerHTML = '';

                    //Second we split the textcontent and loop through it
                    for(var tS=tText.split('/'), m=0, n=tS.length; mHometown/High School:
            Austin, TX/Westwood
        </div>
    </body>
</html>

تحديث:

بالنسبة إلى المشكلة مع الإشارة إلى الوالد الأمني ​​في التعليق ، أحتاج إلى معرفة كيفية جلب العقدة نفسها. إحدى الطرق الممكنة ستكون على النحو التالي:

    //Just an event bound to load, for testing
    window.onload = function(){
        var tNode, //Is going to be the current node
            tWalker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false); //All textnodes within the body

        //Check all textnodes in the list
        while(tNode = tWalker.nextNode()){
            console.log('textnode', tNode);
            console.log('content of textnode', tNode.textContent);
            console.log('parent of textnode', tNode.parentNode);

            //We only need the ones containing slashes
            if(tNode.textContent && tNode.textContent.indexOf('/') !== -1){
                console.log('this one we need', tNode);
                //createelements, split, just like above
            }
        }
    };

التحديث 2:

قمت بتعديل المثال الخاص بي وفقاً لتعديلك وما زال يعمل بشكل جيد. ربما تحصل على خفوت textnodes في صفيف الخاص بك من الوقت الذي دفعهم حتى الوقت الذي يمكنك الوصول إليها؟

<html>
    <head>
        <script>
            var selectedTextNodes = []; //The textnodes from treewalker get stored here

            //Just an event bound to load, for testing
            window.onload = function(){
                var tNode, //Is going to be the current node
                    tWalker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false); //All textnodes within the body

                //Check all textnodes in the list
                while(tNode = tWalker.nextNode()){
                    //Adding the textnode to the list depending on some condition
                    (tNode.textContent && tNode.textContent.trim()) && selectedTextNodes.push(tNode)
                };

                useTextNodes(selectedTextNodes)
            };

            //Functions to use the textnodes in anyway
            function useTextNodes(listOfTextNodes){
                if(listOfTextNodes && listOfTextNodes.length){
                    for(var i=0, j=listOfTextNodes.length; iHometown/High School:
            Austin, TX/Westwood
        </div>
    </body>
</html>
0
وأضاف
مرحبًا ، شكرًا على هذه الإجابة الموضحة تمامًا. على الرغم من أن rtechContainer غير موجود بالفعل في html (راجع رمز المثال الخاص بي ، فإنني أقوم بإنشائه باستخدام document.createElement ('rtechContainer')). على الرغم من أنني قد ذكرت هذا في آخر رمز المذكورة في السؤال ، وضعت لي سيئة أنا أول رمز html خاطئ. لقد قمت بتحديثه. أول كود html تجده في السؤال هو كيف أتلقى أتش تي أم أل. أتلقى عقدة النص كـ "Austin، Tx/Westwood". كما أن parentElement الخاص به فارغ أيضًا ، ويكون parentNode أيضًا فارغًا (على الرغم من أنه داخل <td>)
وأضاف المؤلف Tripti Rawat, مصدر
مرحباLain ، الثابتة والمتنقلة الرجوع إلى التحديث معلومات إضافية في سؤالي حيث شرحت ما يجري على جانبي. آمل أن يكون التوضيح واضحًا.
وأضاف المؤلف Tripti Rawat, مصدر
omg أنت على صواب! كنت تشغيل اثنين من الحلقات لادارة وتقسيم أنواع مختلفة من العقد النص (الواردة في صفيفتين) جمعت في أول traversal treeWalker. منذ ذلك الحين فصلت بين الاثنين في وظيفتين مختلفتين ، كل منهما له عبور خاص به قبله ، وهو يعمل بشكل مثالي. شكرا على ذلك. ما زلت لا أعرف على الرغم من السبب في أنها تؤثر فقط على عقدة النص من النوع الثاني وليس النوع الأول. لكن شكرا على أي حال. يمكنك إضافة هذا السطر في إجاباتك إذا كنت تريد ، سأقبله.
وأضاف المؤلف Tripti Rawat, مصدر
كيف تتلقى أو تجلب ذلك textnode؟ لا أقصد سلسلة المحتوى بل العقدة نفسها.
وأضاف المؤلف Lain, مصدر
قدم تحديثا صغيرا ويمكنني الوصول إلى parentNode دون أي مشكلة. على الأقل من المثال المقدم.
وأضاف المؤلف Lain, مصدر
هل أنت متأكد من أن textnode2 هو حقا "text2". هل سبق لك تسجيل محتوى النص؟ يتضمن TreeWalker أيضا textnodes أخرى ، مثل <script> ،
وأضاف المؤلف Lain, مصدر
قدم مثال آخر مع الهيكل المذكور الخاص بك. ومع ذلك لا يزال يعمل بشكل صحيح هنا.
وأضاف المؤلف Lain, مصدر
سعيد أنه تم حلها :-)
وأضاف المؤلف Lain, مصدر