جافا سكريبت: إزالة المسافات البيضاء عندما لا ينبغي ذلك؟

StackOverflow https://stackoverflow.com/questions/213845

سؤال

لدي ملف HTML يحتوي على كود مشابه لما يلي.

<table>
    <tr>
    <td id="MyCell">Hello  World</td>
    </tr>
</table>

أنا أستخدم جافا سكريبت كما يلي للحصول على القيمة

document.getElementById(cell2.Element.id).innerText

يؤدي هذا إلى إرجاع النص "Hello World" مع وجود مسافة واحدة فقط بين hello وworld.يجب أن أحتفظ بنفس عدد المسافات، هل هناك أي طريقة للقيام بذلك؟

لقد حاولت استخدام InternalHTML وouterHTML وعناصر مماثلة، لكن لم يحالفني الحظ.

هل كانت مفيدة؟

المحلول

HTML غير حساس للمسافة البيضاء مما يعني أن DOM الخاص بك أيضًا.من شأنه أن يغلف "Hello World" الخاص بك قبل منع العمل على الإطلاق؟

نصائح أخرى

في HTML، يتم تجاهل أية مسافات> 1، سواء في عرض النص واسترجاعها عبر DOM. الطريقة الوحيدة المضمونة للحفاظ على المساحات لاستخدام &nbsp; مسافة غير منقسمة.

ومجرد تلميح، innerText يعمل فقط في Internet Explorer، في حين يعمل HTML داخلي في كل متصفح ... لذلك، استخدام HTML داخلي بدلا من innerText

العلامة pre أو white-space: pre في CSS الخاص بك وسوف يعامل جميع الأماكن ذات معنى. هذا وسيتم أيضا، ومع ذلك، وتحويل أسطر جديدة في فواصل الأسطر، لذا كن حذرا.

لقد قمت للتو بفحصه ويبدو وكأنه يلتف بـ قبل العلامة يجب أن تفعل ذلك.

وتحرير: كنت مخطئا، تجاهل لي

.

ويمكنك الحصول على nodeValue عقدة النص، والتي ينبغي أن تمثل بشكل صحيح بيضاء لها.

وهنا هي وظيفة للحصول متكرر النص في عنصر معين (وهذا مكتبة آمنة، لن تفشل إذا كنت تستخدم شيئا بتعديل Array.prototype أو أيا كان): 

var textValue = function(element) {
    if(!element.hasOwnProperty('childNodes')) {
        return '';
    }
    var childNodes = element.childNodes, text = '', childNode;
    for(var i in childNodes) {
        if(childNodes.hasOwnProperty(i)) {
            childNode = childNodes[i];
            if(childNode.nodeType == 3) {
                text += childNode.nodeValue;
            } else {
                text += textValue(childNode);
            }
        }
    }
    return text;
};

مجرد رأي هنا وليس نصيحة قانونية لكنك متجه لعالم أو تتألم إذا كنت تحاول استخراجه بالضبط القيم النصية من DOM باستخدام خصائص HTML/TEXT الداخلية/الخارجية عبر Javascript.ستعرض المتصفحات المختلفة قيمًا مختلفة قليلاً، بناءً على كيفية "رؤية" المتصفح للمستند الداخلي.

إذا كان بإمكانك، سأغير HTML الذي تعرضه ليشمل مدخلات مخفية، شيء من هذا القبيل

<table>
    <tr>
    <td id="MyCell">Hello  World<input id="MyCell_VALUE" type="hidden" value="Hello  World" /></td>
    </tr>
</table>

ثم احصل على القيمة الخاصة بك في جافا سكريبت شيء من هذا القبيل

document.getElementById(cell2.Element.id+'_VALUE').value

تم تصميم علامات الإدخال للاحتفاظ بالقيم، وستقل احتمالية مواجهة مشكلات الدقة.

ويبدو أيضًا أنك تستخدم عنصر تحكم .NET من نوع ما.قد يكون من المفيد الاطلاع على الوثائق (ha) أو طرح سؤال مختلف قليلاً لمعرفة ما إذا كان عنصر التحكم يوفر واجهة برمجة تطبيقات رسمية من جانب العميل من نوع ما.

هذا اختراق بعض الشيء، لكنه يعمل على IE الخاص بي.

<!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" lang="en">
<head>
    <title></title>
</head>
<body>
<div id="a">a  b</div>
<script>
var a = document.getElementById("a");
a.style.whiteSpace = "pre"
window.onload = function() {
    alert(a.firstChild.nodeValue.length) // should show 4
}
</script>
</body>
</html>

بعض الملاحظات:

  • يجب أن يكون لديك نوع الوثيقة.
  • لا يمكنك الاستعلام عن عنصر DOM قبل تشغيل window.onload
  • يجب عليك استخدام element.nodeValue بدلاً من InternalHTML et al لتجنب الأخطاء عندما يحتوي النص على أشياء مثل < > & "
  • لا يمكنك إعادة ضبط المساحة البيضاء بمجرد انتهاء IE من عرض الصفحة بسبب ما أفترض أنه خطأ قبيح

إذا شخص ما يمكن تنسيق آخر مشاركة لي بشكل صحيح أنها تبدو أكثر قابلية للقراءة. آسف، أنا عابث أن واحد. في الأساس هو خدعة خلق خلق عنصر قبل بخس، ثم إلحاق نسخة من عقدة لذلك. ثم يمكنك الحصول على innerText أو textContent اعتمادا على المتصفح.

وجميع المتصفحات باستثناء IE تفعل أساسا شيء واضح بشكل صحيح. IE يتطلب هذا الإختراق لأنه يحفظ فقط أبيض الفضاء في العناصر السابقة، وفقط عند الوصول إلى innerText.

وهذه الخدعة التالية يحافظ على المسافة البيضاء في innerText في IE 

var cloned = element.cloneNode(true);
var pre = document.createElement("pre");
pre.appendChild(cloned);
var textContent = pre.textContent
  ? pre.textContent
  : pre.innerText;
delete pre;
delete cloned;
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top