核心要點(diǎn)

• JavaScript中的abbreviate()函數(shù)能夠智能地將字符串縮短到指定的最大長(zhǎng)度，確保不會(huì)在單詞中間斷開，並去除多餘的空格。
• 該函數(shù)接受三個(gè)參數(shù)：原始輸入字符串、最大輸出長(zhǎng)度和一個(gè)可選的後綴，添加到縮寫字符串的末尾。如果未定義後綴，則默認(rèn)為“…”，表示縮寫。
• 此函數(shù)可用於需要限製字符串長(zhǎng)度的任何場(chǎng)景，例如處理表單輸入、創(chuàng)建自定義工具提示、在基於 Web 的電子郵件列表中顯示郵件主題或預(yù)處理要通過(guò) Ajax 發(fā)送的數(shù)據(jù)。
• 該函數(shù)的有效性在於它能夠?qū)⑤斎胱址鸱譃閱蝹€(gè)單詞，然後重新組合盡可能多的單詞以適應(yīng)最大長(zhǎng)度。它還會(huì)預(yù)處理輸入以去除多餘的空格。

本文將介紹一個(gè)名為abbreviate()的簡(jiǎn)潔高效的JavaScript函數(shù)，其主要功能正如其名：智能地縮短字符串到指定的長(zhǎng)度。它確保不會(huì)在單詞中間截?cái)?，並預(yù)處理字符串以去除多餘的空格。以下是abbreviate函數(shù)的代碼：

function abbreviate(str, max, suffix) {
  if ((str = str.replace(/^\s+|\s+$/g, '').replace(/[\r\n]*\s*[\r\n]+/g, ' ').replace(/[ \t]+/g, ' ')).length <= max) {
    return str;
  }

  var
    abbr = '',
    str = str.split(' '),
    suffix = (typeof suffix !== 'undefined' ? suffix : ' ...'),
    max = (max - suffix.length);

  for (var len = str.length, i = 0; i < len; i++) {
    if ((abbr + str[i]).length <= max) {
      abbr += str[i] + ' ';
    } else {
      break;
    }
  }

  return abbr.replace(/[ ]$/g, '') + suffix;
}

該函數(shù)接受三個(gè)參數(shù)：原始輸入字符串、最大輸出長(zhǎng)度和一個(gè)可選的後綴，添加到縮寫字符串的末尾。如果未定義後綴，則默認(rèn)為“…”（一個(gè)空格後跟三個(gè)點(diǎn)），這是一種常見且易於識(shí)別的縮寫指示方式。

函數(shù)用途

此函數(shù)可用於需要限製字符串長(zhǎng)度的任何場(chǎng)景，作為簡(jiǎn)單substr表達(dá)式的更智能的替代方案?？赡艿膽?yīng)用有很多，例如處理表單輸入、創(chuàng)建自定義工具提示、在基於 Web 的電子郵件列表中顯示郵件主題或預(yù)處理要通過(guò) Ajax 發(fā)送的數(shù)據(jù)。例如，要將字符串限制為 100 個(gè)字符並添加默認(rèn)後綴，我們可以這樣調(diào)用它：

str = abbreviate(str, 100);

這在概念上等同於此substr表達(dá)式：

str = str.substr(0, 96) + " ...";

但這是一種非常粗略的方法，因?yàn)樗３?huì)導(dǎo)致輸出字符串在單詞中間斷開。 abbreviate函數(shù)專門設(shè)計(jì)為不會(huì)這樣做，它會(huì)在最後一個(gè)單詞之前拆分字符串，而不是在單詞中間拆分。因此，abbreviate()生成的輸出字符串通常會(huì)短於指定的最大長(zhǎng)度，但絕不會(huì)長(zhǎng)於它。該函數(shù)還考慮了縮寫後綴所需的空格，即如果指定的最大長(zhǎng)度為 100，但後綴本身為 4 個(gè)字符，那麼我們最多只能使用 96 個(gè)主輸入字符串的字符。您可以通過(guò)傳遞空字符串來(lái)指定根本沒(méi)有後綴，或者如果您想縮寫標(biāo)記字符串，則可以將其定義為 HTML 關(guān)閉標(biāo)籤。例如，以下輸入：

abbreviate("<p>One two three four five</p>", 15, "");

將產(chǎn)生此輸出：

function abbreviate(str, max, suffix) {
  if ((str = str.replace(/^\s+|\s+$/g, '').replace(/[\r\n]*\s*[\r\n]+/g, ' ').replace(/[ \t]+/g, ' ')).length <= max) {
    return str;
  }

  var
    abbr = '',
    str = str.split(' '),
    suffix = (typeof suffix !== 'undefined' ? suffix : ' ...'),
    max = (max - suffix.length);

  for (var len = str.length, i = 0; i < len; i++) {
    if ((abbr + str[i]).length <= max) {
      abbr += str[i] + ' ';
    } else {
      break;
    }
  }

  return abbr.replace(/[ ]$/g, '') + suffix;
}

函數(shù)工作原理

abbreviate函數(shù)的關(guān)鍵在於能夠?qū)⑤斎胱址鸱譃閱蝹€(gè)單詞，然後重新組合盡可能多的單詞以適應(yīng)最大長(zhǎng)度。為了提高效率，我們需要確保單詞之間的分隔符是可預(yù)測(cè)的，最簡(jiǎn)單的方法是最小化內(nèi)部空格——將換行符和製表符轉(zhuǎn)換為空格，然後減少連續(xù)空格，以便每個(gè)內(nèi)部空格塊都變成一個(gè)空格。當(dāng)然，還有其他方法可以處理這個(gè)問(wèn)題——例如，我們可以為分割定義更靈活的正則表達(dá)式，該表達(dá)式考慮了我們可能在單詞之間找到的所有不同類型的字符。甚至還有一個(gè)用於正則表達(dá)式的單詞邊界字符（“b”），所以我們也可以使用它。但我發(fā)現(xiàn)空格預(yù)處理本身很有用，尤其是在處理用戶輸入時(shí)。而按單詞邊界分割不會(huì)產(chǎn)生預(yù)期的結(jié)果，因?yàn)槠普厶?hào)、點(diǎn)、逗號(hào)和大多數(shù)特殊字符實(shí)際上都被視為單詞邊界。但我認(rèn)為除非字符後跟空格，否則按標(biāo)點(diǎn)符號(hào)分割單詞是不合適的，這樣連字符單詞和代碼片段就不會(huì)在中間分割。因此，該函數(shù)的第一項(xiàng)工作是進(jìn)行空格預(yù)處理，然後如果結(jié)果已經(jīng)短於指定的最大值，我們可以直接返回它：

str = abbreviate(str, 100);

如果我們不這樣做，那麼我們可能會(huì)遇到字符串在不必縮寫時(shí)被縮寫的情況，例如：

str = str.substr(0, 96) + " ...";

如果沒(méi)有第一個(gè)條件，我們將得到縮寫的輸出，因?yàn)橹付ǖ淖畲笾当仨毧紤]後綴的長(zhǎng)度：

abbreviate("<p>One two three four five</p>", 15, "");

而添加第一個(gè)條件則會(huì)產(chǎn)生未修改的輸出：

<p>One two>

因此，除非我們?cè)诖藭r(shí)返回，否則我們將繼續(xù)編譯縮寫字符串——按空格分割輸入字符串以創(chuàng)建單個(gè)單詞，然後迭代地將每個(gè)單詞-空格對(duì)重新組合在一起，只要縮寫字符串短於指定的最大長(zhǎng)度。一旦我們編譯了所需的內(nèi)容，我們就可以中斷迭代，然後從縮寫字符串的末尾修剪殘留的空格，然後再添加後綴，最後返回結(jié)果。從右端修剪殘留的空格然後再用默認(rèn)後綴添加它看起來(lái)有點(diǎn)浪費(fèi)，但這允許輸入後綴根本沒(méi)有空格。

結(jié)論

這就是一個(gè)簡(jiǎn)單但智能的字符串縮寫函數(shù)，它還會(huì)預(yù)處理輸入以去除多餘的空格。根據(jù)我的經(jīng)驗(yàn)，這兩個(gè)要求通常會(huì)同時(shí)出現(xiàn)，這就是我開發(fā)此函數(shù)以這種方式工作的原因。

(由於篇幅限制，此處省略了FAQ部分。 如果需要，可以單獨(dú)提供FAQ部分的偽原創(chuàng)版本。)

以上是智能弦縮寫的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！