如何在每80个字符后插入换行符

Question

我有一个非常长的字符串。

我想在每80个字符后添加<br/>，以便它可以在内部HTML中显示得很好。

有什么简单的方法吗？

- anas

---

使用 String.substring()... 您可以在此处了解更多信息。 - jahroy

你能用 CSS 做到吗？ - Arun Killu

似乎你正在尝试用JavaScript替换CSS。 - Saksham

是的，Arun，我可以使用“word-wrap: break-word;”来处理CSS。 - anas

Answer 1

使用 long_string.replace(/(.{80})/g, "$1<br>"); 进行操作。

在此处检查: http://jsfiddle.net/x2YJp/

- chris-l

Answer 2

这里是学术版（它比正则表达式更快）：

function fold(input, lineSize, lineArray) {
    lineArray = lineArray || [];
    if (input.length <= lineSize) {
        lineArray.push(input);
        return lineArray;
    }
    lineArray.push(input.substring(0, lineSize));
    var tail = input.substring(lineSize);
    return fold(tail, lineSize, lineArray);
}

使用方法:

var arrayOfLines = fold(longString, 80);
var foldedString = arrayOfLines.join('<br/>');

• 工作中的 jsFiddle

• 性能比较 vs 正则表达式

---

这种方法很棒的另一个地方是：您可以轻松地在空格处换行。

这里有一个演示可以实现这一点。

- jahroy

Answer 3

可以尝试以下内容：

yourString = yourString.replace(/(.{1,80})/g, '$1<br/>')

您还可以将文本的包含元素的宽度设置为80em。（它不会恰好适合 80个字符，因为em是字母m的宽度，因此您可能需要将其设置为稍低）

- tckmn

---

它不会完全适配80字宽度... 除非他使用等宽字体（你抄我的答案了吗？ ：P jk，我知道这是直截了当的答案） - chris-l

@chris 这就是我在我的回答中所说的。另外，不，我没有抄袭你的答案，我正在使用 iPhone 回答，所以当新答案发布时我看不到它们，而且我打字很慢 :P。 - tckmn

@chris - 当有一种直接的方法可以做到时，这并不是抄袭。 - jahroy

Answer 4

将0,1替换为0,80，并将join('is')替换为'<br />'

console.log("google is very fast".match(new RegExp(".{0,1}", "g")).join('is'));

- Arun Killu

---

我非常好奇你为什么要这样做你的例子。为什么在你的例子中使用0,1和is，然后添加指令将它们替换为0,80和<br/>，而不是直接在示例中使用0.80和<br/>？ - chris-l

@chris-l 我其实不记得了。但我想我可能尝试过自己复制并直接粘贴到那里。 - Arun Killu

Answer 5

jahroy答案的TypeScript变体：

export class FrameworkUtil {

    public static foldText(text: string, charCount: number, buildArray: string[] = []) {
        if (text.length <= charCount) {
            buildArray.push(text);
            return buildArray;
        }
        let line = text.substring(0, charCount);
        const lastSpaceRgx = /\s(?!.*\s)/;
        const idx = line.search(lastSpaceRgx);
        let nextIdx = charCount;
        if (idx > 0) {
            line = line.substring(0, idx);
            nextIdx = idx;
        }
        buildArray.push(line);
        return FrameworkUtil.foldText(text.substring(nextIdx), charCount, buildArray);
    }
}

- Oritm

Answer 6

如果您想要一个快速的解决方案，可以使用这个算法：

function textFold(input, lineSize) {
  const output = []
  let outputCharCount = 0
  let outputCharsInCurrentLine = 0
  for (var i = 0; i < input.length; i++) {
    const inputChar = input[i]
    output[outputCharCount++] = inputChar
    if (inputChar === '\n') {
      outputCharsInCurrentLine = 0
    } else if (outputCharsInCurrentLine > lineSize-2) {
      output[outputCharCount++] = '\n'
      outputCharsInCurrentLine = 0
    } else {
      outputCharsInCurrentLine++
    }
  }
  return output.join('')
}

document.getElementsByTagName('pre')[0].innerHTML = textFold('0123456789abcdefghijklmnopqrstuvwxyz', 10)

<pre></pre>

输入：

0123456789abcdefghijklmnopqrstuvwxyz

输出：

0123456789
abcdefghij
klmnopqrst
uvwxyz

- slartidan

---

我该如何添加CSS样式？比如说我想要居中对齐。 - Nahiduzzaman