Javascript：在不分割单词的情况下插入第n个字符，并将nbsp添加到计数中

Question

Without going too much into detail, some basic facts: I'm not a web developer, I don't really know javascript, just enough to make me dangerous. We utilize a website integration third-party software, that takes data from our ERP inventory system, and creates web pages, for products, ordering, etc... and then syncs it back into our ERP, using an SQL database. Part of this packages includes an HTML editor that was added to our inventory system to help create listings. This HTML code is then broken up into SQL varchar(250). When the website is ultimately generated we end up with merged words every 250 characters. To keep the examples shorter, and because the solution shouldn't matter, let's assume it's varchar(100) and merges words every 100 characters:

Example: This is an example and it runs 140 characters long, and this is how you would expect it to look on a website when presented to the end user.

Our Website: This is an example and it runs 140 characters long, and this is how you would expect it to look on awebsite when presented to the end user.

I've merged the words "a" and "website" to be "awebsite" as that is what happens. It never breaks words, and always just removes the space before the word that would cause it to break 100 characters.

Now, some are probably going to ask, "Why not have the third-party company fix this?" We tried, it was a costly integration, and they could not figure out why or how to fix it after 2 months, and eventually said it was costing too much to fix the bug that they were not going to solve it, and if we wanted to we could pay more to have them come up with a solution.

We came up with our own solution, simply find the 100th character, and right before whatever word that was insert a so my HTML code looked like this:

<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>

Okay, this works, but its very labor intensive when you have 500+ character count descriptions, and the SQL table takes into consideration all code as characters, every time we manually add a &nbps; it adds 6 characters, making us need to recount the next string etc...

So I'm trying to create a simple form, easy enough:

 $(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> 

This was my attempt at a solution, just to replace all spaces with hard coded spaces. But of course this inserts a new problem. Strings now break divs/tables etc... and just run on in a single line until they end, web browsers cannot word wrap this solution. So, I tried to find more advanced solutions, but I am not skillful enough to merge these solutions into one that solves my specific problem.

Goal: To have that simple form, that spits out a HTML code, but instead of inserting a nbsp; in EVERY space, only have it insert a nbsp; right after the space after the last full word before reaching 100 characters. However it cannot replace the space that is there, just add a new hard-coded one. Then repeat itself and count the next 100 characters, including the +6 characters added by inserting the nbps;

So we would end up with something that looked identical to our manual code:

<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>

And taken further:

<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>

Here is the research I've done so far, but have unsuccessfully tried to implement:

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

Here you go. Should be pretty good.

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);