How can I remove a certain amount of tabs in String with js?-CodePudding

The goal is to remove 4 tabs in front in each line with the use of JS.

Current String:

            .mockuptext{
                max-width: 40%;
                min-width: 150px;
                max-height: 70%;
                margin: 3rem;
                padding: calc(1rem   30px) 1.5rem 1rem 1rem;                  
            }

Desired String:

.mockuptext{
    max-width: 40%;
    min-width: 150px;
    max-height: 70%;
    margin: 3rem;
    padding: calc(1rem   30px) 1.5rem 1rem 1rem;                  
}

CodePudding user response：

There are possibly multiple ways of doing this. Since you did not share the context/use-case of of this problem, I am assuming that you already have a means of accessing the string and storing it in a variable. If you have that, you can refer to the code below.

You can use regular expressions to find and replace occurrences of 4 tabs at the beginning of each line.

The Regex that I am using to match 4 tabs at the beginning of each line is \^\t{4}\gm:

The gm flag at the end of the regex stands for global (i.e. return all matches, not just the first one) and multiline; the multiline flag tells the regex matcher to perform the match at each line instead of the beginning of the string.
The ^ matches the beginning of the line
The \t{4} matches 4 tab characters.
Overall, the regex is saying "Find occurrences of 4 tabs starting at the beginning of each line in a string"

To actually modify the string, I am using the replace method. which takes a regex and replaces all matches of the regex with the second argument of the method.

let s = `\
\t\t\t\t.mockuptext{\n
\t\t\t\t\tmax-width: 40%;\n
\t\t\t\t\tmin-width: 150px;\n
\t\t\t\t\tmax-height: 70%;\n
\t\t\t\t\tmargin: 3rem;\n
\t\t\t\t\tpadding: calc(1rem   30px) 1.5rem 1rem 1rem;\n
\t\t\t\t}\n
`;
console.log(s);

console.log(s.replace(/^\t{4}/gm, ""))

You can also create a function to encapsulate the wrapping like:

function replace4Tabs(s) {
  return s.replace(/^\t{4}/gm, "")
}

and if you have an html element that you want to update, you can use

elem.innerHTML = replace4Tabs(elem.innerHTML);

PS: If you are new to Regex, I have found Regex101 to be a great resource. It will highlight matches as you type and provide an explanation of how Regex is matching https://regex101.com/r/7SxOEM/1