javascript - 删除 Javascript 中的空格

Question

这里是 Javascript 的 super 新手。我对空白有疑问，希望有人能帮助我。

我有一个看起来像这样的函数:

function createLinks()  
  {
  var i = 0;
  tbody = document.getElementsByTagName('tbody')[3];
    console.log('test order ID: '+document.getElementsByTagName('tbody')[3].getElementsByTagName('tr')[0].getElementsByTagName('td')[1].textContent.replace(/^\s+|\s+$/g,''))
  trs = tbody.getElementsByTagName('tr');
console.log('trs.length = '+trs.length);
  for (i=0;i<trs.length;i++)
  {
orderId = trs[i].getElementsByTagName('td')[1].textContent.replace(/^\s+|\s+$/g,'');
    console.log('order: '+orderId);

hrefReturn = 'https://www.example.com/example.html?view=search&range=all&orderId='+orderId+'+&x=13&y=17';
linkReturn = '<a href='+hrefReturn+'>'+orderId+'</a>';
    console.log(linkReturn);

trs[i].getElementsByTagName('td')[1].innerHTML = linkReturn;

  }
}

我在最初加载页面时使用另一个函数调用此函数。这非常有效。

但是，当页面上的数据发生变化时，我也用另一种方式调用这个函数。有一个下拉列表，我附加了一个 onClick 属性。该 onClick 事件调用第一个函数，该函数又调用第二个函数(上面)。这两个函数都保存到文本变量中并附加到文档中，如下所示:

var scriptTextLinks = " function createLinksText()  {  var i = 0;  tbody = document.getElementsByTagName('tbody')[3];   console.log('test order ID: '+document.getElementsByTagName('tbody')[3].getElementsByTagName('tr')[0].getElementsByTagName('td')[1].textContent.replace(/^\s+|\s+$/g,''));  trs = tbody.getElementsByTagName('tr'); console.log('trs.length = '+trs.length);  for (i=0;i<trs.length;i++)      { orderId = trs[i].getElementsByTagName('td')[1].textContent.replace(/^\s+|\s+$/g,'').replace(/\s/g,''); orderId = orderId.replace(/\s/g,''); console.log('order: '+orderId); hrefReturn = 'https://www.example.com/example.html?view=search&range=all&orderId='+orderId+'+&x=13&y=17'; linkReturn = '<a href='+hrefReturn+'>'+orderId+'</a>';        console.log(linkReturn);    trs[i].getElementsByTagName('td')[1].innerHTML = linkReturn;   }  console.log('complete'); } "

最后就是具体问题了。当网页上的事件调用同一函数的这个版本时，它无法正确删除空格，这会破坏它应该创建的链接。

这是代码的确切问题部分:

orderId = trs[i].getElementsByTagName('td')[1].textContent.replace(/^\s+|\s+$/g,'').replace(/\s/g,''); orderId = orderId.replace(/\s/g,''); console.log('order: '+orderId);

因此，与其像这样存储变量，不如这样:

"XXXXXXXXX"

它是这样存储的:

"   
      XXXXXXXXXX
                  "

这又一次终止了链接。

任何人都可以澄清这里发生了什么，以及我该如何解决它？提前致谢!

Answer 1

要去除所有周围的空白，您可以使用标准的 .trim() 方法。

var myString = "                \n               XXXXXXX           \n         ";
myString = myString.trim();

您可以去除所有前导和尾随，并将内部空白压缩为一个空格，就像在 HTML 渲染中通常所做的那样，就像这样......

var myString = "    \n    XXXX  \n     YYYY    \n   ";
myString = myString.replace(/\s+/g, " ").trim();

另请参阅下面 tharrison 的评论。

(尽管我的 /\s+/g 模式与嵌入的 \n 换行符配合得很好)

---

解决 IE<9

“shim.js”

(function() {
    if (! String.prototype.trim) {
        //alert("No 'trim()' method. Adding it.");
        String.prototype.trim = function() {
            return this.replace(/^\s+|\s+$/mg, '');
        };
    }
})();

(或者，如果你可能想在你的 shim 中做其他事情......)

var shim = {
    init: function() {
        if (! String.prototype.trim) {
            String.prototype.trim = function() {
                return this.replace(/^\s+|\s+$/mg, '');
            };
        }
    }
};
shim.init();

您的 HTML 文件

<script type="text/javascript" src="shim.js"></script>