Wie kann ich nach jeweils n Zeichen in Javascript ein Zeichen einfügen?

74

Ich habe eine Schnur: "Der schnelle Braunfuchs springt über die faulen Hunde."

Ich möchte JavaScript (möglicherweise mit jQuery) verwenden, um alle n Zeichen ein Zeichen einzufügen . Zum Beispiel möchte ich anrufen:

var s = "The quick brown fox jumps over the lazy dogs.";
var new_s = UpdateString("$",5);
// new_s should equal "The q$uick $brown$ fox $jumps$ over$ the $lazy $dogs.$"

Das Ziel ist es, diese Funktion zu verwenden, um lange Zeichenfolgen einzufügen und zu scheuen , damit sie umbrochen werden können.

Vielleicht kennt jemand einen besseren Weg?

brendan
quelle
Sie sollten den Browser besser Text umbrechen lassen. Haben Sie lange Sätze, wie Sie sie für Ihr Beispiel oben verwendet haben, oder lange Wörter?
Dan Herbert
1
Der Browser wird nicht in ein Wort eingeschlossen, ich habe lange Wörter wie "ThisIsAStupidLabelThatOneOfMyUsersWillTryToMakeInMyApplication"
brendan
Wäre eine serverseitige Lösung zum Aufteilen von Wörtern in maximal n Zeichen nicht besser?
Pool
Möglicherweise, aber eine clientseitige Lösung ist für meine derzeitige Situation einfacher zu implementieren.
brendan

Antworten:

74
function chunk(str, n) {
    var ret = [];
    var i;
    var len;

    for(i = 0, len = str.length; i < len; i += n) {
       ret.push(str.substr(i, n))
    }

    return ret
};

chunk("The quick brown fox jumps over the lazy dogs.", 5).join('$');
// "The q$uick $brown$ fox $jumps$ over$ the $lazy $dogs."
Halbmond frisch
quelle
@Andy E: heh, sie sind kurz vor dem Schließen optional }. Ich merke nicht einmal mehr, dass ich das mache. Es ist aus einer "Muss jedes Byte erhalten" -Mentalität von Jahren geboren, bevor js Kompressoren zum Standard wurden;)
Crescent Fresh
String.split("")&Array.form()
Regex & string.split () & array.form () & Slice () & map () & JSON.parse ()
171

Mit Regex

"The quick brown fox jumps over the lazy dogs.".replace(/(.{5})/g,"$1$")

The q$uick $brown$ fox $jumps$ over$ the $lazy $dogs.$

Prost,

SIE
quelle
10
Verdammt! Schöner Regex-Fu dort. Übrigens wird der letzte $in der Ersatzzeichenfolge benötigt?
Crescent Fresh
2
Das letzte $ in der Ersatzzeichenfolge wird nicht benötigt. Sie können hier das 5-Leerzeichen-Intervall eingeben, wie Sie möchten, z. B. <br> .
Skymook
6
Ich bin angekommen bei "string".replace(/.{5}/g, "$&" + "<br>");. Die Verkettung am Ende soll nur das Lesen erleichtern. $&In der Ersetzung stimmt die übereinstimmende Zeichenfolge überein, sodass keine Gruppierung erforderlich ist.
Matpie
3
Wie würde das funktionieren, wenn ab dem Ende der Zeichenfolge gezählt wird?
Philk
Toll. Ein wichtiger Hinweis ist, wenn die Zeichenfolge Zeilenumbrüche enthält, wird diese am Anfang jeder Zeile von Null an gezählt, da .sie nicht mit \noder übereinstimmt \r. Dies ist perfekt zum Falten langer Klartextzeilen, bei Webinhalten jedoch möglicherweise nicht wünschenswert. Um Zeilenumbrüche in das Spiel aufzunehmen, verwenden Sie /[\s\S]{5}/g.
Mangel
32

Halte es einfach

  var str = "123456789";
  var parts = str.match(/.{1,3}/g);
  var new_value = parts.join("-"); //returns 123-456-789
Kareem
quelle
Was ist, wenn ich eine Zehn-Buchstaben-Nummer habe und das '-' nur nach dem 3. und 6. Buchstaben haben möchte? und NICHT der 9. Buchstabe.
Lerner
@Learner entferne das letzte "-" mit Regex.
Kareem
Kannst du teilen? Danke im Voraus.
Lerner
1
"123-456-789-0" .replace (/ - ([^ -] +) $ /, '$ 1'); // letzten Strich entfernen
Kareem
Ich liebe diese Idee. Kann dies auch im laufenden Betrieb erfolgen (während der Benutzer noch tippt)?
JonSnow
4
let s = 'The quick brown fox jumps over the lazy dogs.';
s.split('').reduce((a, e, i)=> a + e + (i % 5 === 4 ? '$' : ''), '');

Erklären Sie: split ('') verwandelt einen String in ein Array. Jetzt wollen wir das Array wieder auf eine einzige Zeichenfolge zurücksetzen. Reduzieren ist in diesem Szenario perfekt. Die Reduzierungsfunktion des Arrays verwendet 3 Parameter, der erste ist der Akkumulator, der zweite ist das iterierte Element und der dritte ist der Index. Da der Array-Index auf 0 basiert und nach dem 5. eingefügt werden soll, betrachten wir den Index i% 5 === 4.

g.sui
quelle
1
Vielen Dank für diesen Code. Hier ist der Code, basierend auf Ihrem, den ich verwende, um alle 2 Zeichen ein Leerzeichen für eine Telefonnummerneingabe hinzuzufügen (Schlüsselereignis): ~~~ $ (this) .val ($ (this) .val (). Replace (/ /g,"").split('').reduce((a,e,i) => a + e + (i% 2 === 1? '': ''), ''). trim ( )); ~~~
Mystral
3
var str="ABCDEFGHIJKLMNOPQR";
function formatStr(str, n) {
   var a = [], start=0;
   while(start<str.length) {
      a.push(str.slice(start, start+n));
      start+=n;
   }
   console.log(a.join(" "));
}
formatStr(str,3);
Kanti
quelle
Versuchen Sie, Ihre Antwort zu erklären
Coder
1
function addItemEvery (str, item, every){
  for(let i = 0; i < str.length; i++){
    if(!(i % (every + 1))){
      str = str.substring(0, i) + item + str.substring(i);
    }
   }
  return str.substring(1);
}

Ergebnis:

> addItemEvery("The quick brown fox jumps over the lazy dogs.", '$', 5)
> "The q$uick $brown$ fox $jumps$ over$ the $lazy $dogs."
Koray Gocmen
quelle
0

Ich habe etwas Ähnliches getan, um eine friendCodefür eine mobile App zu trennen, aber Array zu verwenden und zu reduzieren .

Dies nimmt eine Zeichenfolge, überprüft alle nZeichen und fügt an dieser Stelle ein Trennzeichen hinzu.

/**
 * A function to easily inject characters every 'n' spaces
 * @param {string} friendCode The string we want to inject characters in
 * @param {*} numDigits Determines the 'n' spaces we want to inject at
 * @param {*} delimiter The character(s) we want to inject
 */
function formatFriendCode(friendCode, numDigits, delimiter) {
  return Array.from(friendCode).reduce((accum, cur, idx) => {
    return accum += (idx + 1) % numDigits === 0 ? cur + delimiter : cur;
  }, '')
}

formatFriendCode("000011112222", 4, ' ')
// output "0000 1111 2222 "

formatFriendCode("The quick brown fox jumps over the lazy dogs.", 5, '$')
// output "The q$uick $brown$ fox $jumps$ over$ the $lazy $dogs.$"
Afreeland
quelle
0

Hier ist eine der vorherigen Antworten, aber ich habe sie in eine Funktion eingeschlossen und ihr einen "Offset" -Parameter gegeben, anstatt sie fest zu codieren.

// https://stackoverflow.com/a/2712896/3480193
addCharToStringEveryXSpots(str, char, offset) {
    if ( ! char ) {
        return str;
    }
    
    let regExPattern = new RegExp('(.{' + offset + '})', 'g');
    
    return str.replace(regExPattern, '$1' + char);
};
RedDragonWebDesign
quelle