Question

没有太多细节，一些基本事实：我不是网络开发者，我真的不懂javascript，只是让我变得危险。我们利用网站集成第三方软件，从我们的ERP库存系统获取数据，创建网页，产品，订购等......然后使用SQL数据库将其同步回我们的ERP。此包的一部分包括一个HTML编辑器，该编辑器已添加到我们的库存系统中以帮助创建列表。然后将此HTML代码分解为SQL varchar（250）。当网站最终生成时，我们最终会得到每250个字符的合并单词。为了使示例更短，并且因为解决方案无关紧要，让我们假设它是varchar（100）并且每100个字符合并一次单词：

示例：这是一个示例，它运行140个字符，这个   是你期望它在呈现给网站时在网站上看到的样子   最终用户。

我们的网站：这是一个例子，长度为140个字符   这是你期望它在呈现给网站时的样子   最终用户。

我将“a”和“website”这两个词合并为“awebsite”就是这样。它永远不会破坏单词，并且总是只删除导致它破坏100个字符的单词之前的空格。

现在，有些人可能会问，“为什么不让第三方公司解决这个问题？”我们尝试过，这是一个代价高昂的集成，他们无法弄清楚为什么或如何在2个月后修复它，并最终表示修复它不会解决它的错误并且如果我们想要的话花费太多为了让他们想出一个解决方案，我们可以付出更多。

我们提出了自己的解决方案，只需找到第100个字符，就在插入一个字之前，所以我的HTML代码看起来像这样：

<p>This is an example and it runs 140 characters long, and this is how you would expect it to look on a &nbsp;website when presented to the end user.</p>

好的，这很有效，但是当你有500多个字符数描述时它非常耗费人力，并且每次我们手动添加＆amp; nbps时，SQL表都将所有代码都视为字符。它增加了6个字符，使我们需要重新计算下一个字符串等...

所以我试图创建一个简单的表单，这很容易：

$(function ()
              {
                  $("#btnSubmitTwo").on("click", function ()
                  {
                      var html = "<p>{{inputHTML}}</p>";
                      $(".input").each(function (i, v)
                      {
                          v = $(v);
                          html = html.replace(new RegExp("{{" + v.attr("id") + "}}", 'g'), v.val());
                          html = html.replace(/ /g, '&nbsp;');
                      });
      
                      $("#htmlResultHTML").val(html);
                  })
              });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
              <div class="row">
                  <div class="col-xs-6 col-sm-1">Description:</div>
                  <div class="col-xs-6 col-sm-11"><textarea cols="82" rows="5" type="text" id="inputHTML" class="input"></textarea>
				  <small id="fitmentinline" class="text-muted">Enter Description.</small>
				  </div>
              </div>
      
              <div class="row">
                  <div class="col-xs-12">
                     <button class="btn btn-primary" id="btnSubmitTwo">Submit</button>
                  </div>
              </div>
      
              <div class="row">
                  <div class="col-xs-12">
                      <textarea readonly id="htmlResultHTML" cols="100" rows="100"></textarea>
                  </div>
              </div>
          </div>

这是我尝试解决方案，只是用硬编码空格替换所有空格。但当然这会引入一个新问题。字符串现在打破div /表等...并且只是在一行中运行直到它们结束，Web浏览器无法自动换行此解决方案。所以，我试图找到更高级的解决方案，但我不够熟练将这些解决方案合并到解决我特定问题的解决方案中。

目标：要使用这个简单的表单，那会吐出HTML代码，而不是插入一个在每个空间，只有它插入一个;在达到100个字符之前，在最后一个完整单词之后的空格之后。但它无法取代那里的空间，只需添加一个新的硬编码空间。然后重复自己并计算接下来的100个字符，包括通过插入nbps添加的+6个字符;

因此，我们最终得到的内容与我们的手动代码完全相同：

<p>This is an example and it runs 140 characters long, and this is how you would expect it to look on a &nbsp;website when presented to the end user.</p>

进一步：

<p>This is an example and it runs 140 characters long, and this is how you would expect it to look on a &nbsp;website when presented to the end user. This is an example and it runs 140 characters long, &nbsp;and this is how you would expect it to look on a website when presented to the end user.</p>

以下是我迄今为止所做的研究，但未能成功实施：

How can I set a character limit of 100 without splitting words?

How can I insert a character after every n characters in javascript?

Answer 1

你走了。应该还不错。

var testString = "This is a long sentence for testing the code made. This is a long sentence for testing the code made.This is a long sentence for testing the code made.";
var output = "";
var arr = testString.split(" ");

var maxLength = 50;
var section = "";

for (var i = 0; i <= arr.length; i++) {
  var v = section + arr[i];
  if (v.length >= maxLength) {
    if(output.length != 0) output += "&nbsp;";
    output += section;
    section = arr[i] + " ";
  }
  else if(arr.length == i){
    output += section;
  }
  else{
    section = v + " ";
  }
}
console.info(output);

Javascript：插入每个第n个字符而不拆分字词并将nbsp添加到计数

1 个答案: