Question

我正在尝试创建一个工具，该工具接受输入文本并将其拆分为特定字符数的文本块。但是，我需要确保它不会在一个单词的中间分割文本。

在我的情况下，我将字符串拆分为155个字符。

我已经做了很多搜索尝试找到解决方案，但我担心它可能比我对Javascript的了解让我弄清楚要复杂得多。我相信我只需要制作某种逻辑，如果它在一个单词的中间，将分离器回溯到一个空格来分割，但我不知道如何写出这样的东西。

此处是我的javascript代码：

function splitText() {
    "use strict";
    var str = document.getElementById("user_input").value;
    var size = 195;
    var chunks = new Array(Math.ceil(str.length / size)),
        nChunks = chunks.length;

    var newo = 0;
    for (var i = 0, o = 0; i < nChunks; ++i, o = newo) {
          newo += size;
          chunks[i] = str.substr(o, size);
    }

    var newq = 0;
    for (var x = 0, q = 0; x < nChunks; ++x, q = newq) {
        $("#display").append("<textarea readonly>" + chunks[x] + "</textarea><br/>");
    }
}

这是我的HTML：

<body>
    <content>
        <h1>Text Splitter</h1>
        <form>
            <label>Enter a Message</label>
            <input type="text" name="message" id="user_input">
        </form>
        <form>
            <input type="button" onclick="splitText();" id="submit" value="Submit!"> <br/>
        </form>
        <label>Your split message: </label>
        <p><span id='display'></span></p>
    </content>
</body>

以下是当前工作表单中的代码，如果您想看看： https://jsfiddle.net/add4s7rs/7/

谢谢！我感谢任何帮助！

Answer 1

使用正则表达式将字符串拆分为一定长度的简短方法：

console.log(str.match(/.{1,154}(\s|$)/g));

一些例子：

var str = 'the quick brown fox jumps over the lazy dog';
console.log(str.match(/.{1,10}(\s|$)/g))
Array [ "the quick ", "brown fox ", "jumps over ", "the lazy ", "dog" ]
console.log(str.match(/.{1,15}(\s|$)/g))
Array [ "the quick brown ", "fox jumps over ", "the lazy dog" ]

这是有效的，因为量词（在这种情况下是{1,154}）默认是贪婪的，并且会尝试匹配尽可能多的字符。将(\s|$)放在.{1,154}后面强制匹配终止于空白字符或字符串的结尾。因此.{1,154}(\s|$)最多可匹配154个字符，后跟空格字符。然后/g修饰符使其继续匹配整个字符串。

将它放在你的函数的上下文中：

function splitText() {
    "use strict";
    var str = document.getElementById("user_input").value;
    var chunks = str.match(/.{1,154}(\s|$)/g);

    chunks.forEach(function (i,x) {
        $("#display").append("<textarea readonly>" + chunks[x] + "</textarea><br/>");
    });
}

Answer 2

更简单的方法是将输入的文本拆分为单个单词的数组，然后循环遍历数组并重新构建字符串，并计算添加数组中的下一个单词是否会让您你的最大尺寸。

另请注意，您应将所有form元素保留在一个form内。

最后，您不应使用内联HTML事件属性（onclick等）。这是我们在使用标准和最佳实践之前20多年前使用的一种技术，不幸的是，该技术的使用非常多，它不会因应有的突然死亡而死亡。 There are many reasons not to code this way ，而是使用现代方法在单独的JavaScript中使用.addEventListener()进行所有事件处理。

// Don't set variables to properties of DOM elements, set them to the element
// itself so that if you ever want a different property value, you don't have to
// re-scan the DOM for the same element again.
var str = document.getElementById("user_input");
var output = document.getElementById("display");

document.getElementById("go").addEventListener("click",function(){
    "use strict";
    const size = 155; // Constant is more appropriate here
    var words = str.value.split(/\s+/g); // Create array of all words in field
    
    var finalString = "";
    
    // Loop through array
    for(var i = 0; i < words.length; i++){
      if((finalString + " " + words[i]).length <= size){
        finalString += " " + words[i];
      } else {
        break; // Max size exceeded - quit loop!
      }
    }
    
    // Update field with correct value
    output.textContent = finalString;
    console.log(finalString.length);
});

textarea {
  width:500px;
  height:100px;
}

<h1>Text Splitter</h1>
        <form>
            <label>Enter a Message
            <textarea name="message" id="user_input">This is a test of the emergency broadcast system. If this had been an actual emergency, you would have been informed as to what instructions you should follow in order to remain safe at all times.</textarea></label>
            <input type="button" id="go" value="Submit!"><br>
        </form>
        <label>Your split message: </label>
        <p><span id='display'></span></p>

Answer 3

你可以使用这样一个简单的函数：

function split(string) {
  for(i=154; i>=0; i--) {
    if(string.charAt(i) == " ") {
      var newString1 = string.slice(0, i);
      var newString2 = string.slice(i);
    }
  }
}

如果您愿意，也可以将它们放入数组中，而不是分配给单独的字符串。

Answer 4

这个解决方案具有最大块大小的逻辑，然后在需要适合您的单词时减小该大小。使用while循环和一点C样式逻辑。

function splitText() {
    "use strict";

    var str = document.getElementById("user_input").value;

    // Maximum allowed chunk size
    let MAX_CHUNK_SIZE = 155;
    let chunks = new Array();
    let current_chunk_position = 0;

    while(current_chunk_position < str.length){

        let current_substring = str.substr(current_chunk_position, MAX_CHUNK_SIZE);

        let last_index = current_substring.lastIndexOf(" ") > 0 ? current_substring.lastIndexOf(" ") : MAX_CHUNK_SIZE;

        let chunk = str.substr(current_chunk_position, last_index);
        chunks.push(chunk);

        current_chunk_position += last_index;
    }

    var newq = 0;
    for (var x = 0, q = 0; x < nChunks; ++x, q = newq) {
        $("#display").append("<textarea readonly>" + chunks[x] + "</textarea><br/>");
    }
}

在Javascript中经过一定数量的字符后在空格处拆分字符串

4 个答案: