html - Javascript remove whitespaces in `strings`

I JavaScript the ` is very useful when writing big strings. My problem is that it takes into account the amount of white space before it in the JavaScript. So if your string is indented in the JavaScript, then it will be indented in the string as well. Is there any way to get rid of this?

Because in an example like this I would like the html tag to be flush against the left side in the string, but I do not want to make it flush against the left side in the JavaScript. Check how the console.log turns out to understand it better.

MyFunction = function() {
  console.log(`
    <html>
      <head>
      </head>
      <body>
      </body>
    </html>
  `);
}

MyFunction();

MyFunction = function() {
  console.log(`
    <html>
      <head>
      </head>
      <body>
      </body>
    </html>
  `);
}

MyFunction();

console.log:

Share Improve this question asked Sep 20, 2018 at 19:52 Freddy Bonda 1,2596 gold badges18 silver badges40 bronze badges

What do you want to have happen on the <head> line? Full spaces, no spaces, or just the amount that it's indented relative to <html> (2, it looks like)? – Nicholas Tower Commented Sep 20, 2018 at 19:57
The amount that i's indented relative to <html> (which is 2 yes :) ) – Freddy Bonda Commented Sep 20, 2018 at 20:07

Add a ment |

8 Answers 8

Sorted by: Reset to default 6

Since you want them html tag to be flush against the left side, but still want head and body indented relatively, what you're looking for is to replace set of 4 spaces in the beginning of each line with an empty string.

string.replace(/^ {4}/gm, '')

Here's the live code ..

MyFunction = function() {
  console.log(`
    <html>
      <head>
      </head>
      <body>
      </body>
    </html>
  `.replace(/^ {4}/gm, ''));
}

MyFunction();

You mean trim the white spaces?

MyFunction = function() {
  console.log(`
    <html>
      <head>
      </head>
      <body>
      </body>
    </html>
  `.trim());
}

MyFunction();

If you want auto indentations for all of your tags i would go for a library, maybe something like pretty.

No need to invent the wheel here.

Using a simple regex to find the initial indentation of the string can be done with /^[\r\n]?(\s+)/ - the result can be used to again do a line-for line replacement of the initial indent. Also this takes advantage of the performance of JS RegExp.

If you also want the first and last line breakes removed, just add .trim() after the string replacement.

function trimLeadingWS(str) {
  /*
    Get the initial indentation
    But ignore new line characters
  */
  var matcher = /^[\r\n]?(\s+)/;
  if(matcher.test(str)) {
    /*
      Replace the initial whitespace 
      globally and over multiple lines
    */
    return str.replace(new RegExp("^" + str.match(matcher)[1], "gm"), "");
  } else {
    // Regex doesn't match so return the original string
    return str;
  }
};

MyFunction = function() {
  console.log(trimLeadingWS('nothing to trim'));
  console.log(trimLeadingWS(`
                    really 
                      quite
                        some
                          of                    (amount of spaces after line break should be ignored)
                        indent
                      to 
                    remove
  `));
  console.log(trimLeadingWS(`
    <html>
      <head>
      </head>
      <body>
      </body>
    </html>
  `));
}

MyFunction();

I would do the following:

MyFunction = function() {
  /*however many spaces you want to remove from the front*/
  const spaces = '    '; // four spaces
  /* or */
  const spacesRegex = /\s+/g;
  let str = '';
  const html = `
    <html>
      <head>
      </head>
      <body>
      </body>
    </html>
  `.split('\n')
  .forEach(line=>{
    str += line.replace(spaces, '') + '\n';
  });
  console.log(str);

}

TypeScript solution, removes mon indentation from the string:

/**
 * Remove mon indentation from a string
 * @param str The string to deindent
 * @param tabSize The size of the tab
 * @returns The deindented string
 */
export function deindent(strings: TemplateStringsArray, { tabSize = 2 } = {}) {
  let str = strings.join('');
  str = str.replace(/\t/g, ' '.repeat(tabSize));

  const maxCommonIndent = str
    .split('\n')
    .filter((line) => line.trim() !== '')
    .map((line) => line.match(/^ */)![0].length)
    .reduce((max, indent) => Math.min(max, indent), Infinity);

  return str
    .split('\n')
    .map((line) => line.slice(maxCommonIndent))
    .join('\n');
}

Example:

function deindent(strings, { tabSize = 2 } = {}) {
  let str = strings.join('');
  str = str.replace(/\t/g, ' '.repeat(tabSize));

  const minCommonIndent = str
    .split('\n')
    .filter((line) => line.trim() !== '')
    .map((line) => line.match(/^ */)[0].length)
    .reduce((min, indent) => Math.min(min, indent), Infinity);

  return str
    .split('\n')
    .map((line) => line.slice(minCommonIndent))
    .join('\n');
}


console.log(deindent`
    <html>
      <head>
      </head>
      <body>
        <div>
          Hello World!
        </div>
      </body>
    </html>
`);

You can match the spaces after new lines and get the length of the first one. From that you can build a regex that can replace them:

let MyFunction = function(str) {
    let matches = str.match(/ +/g)
    let initial = matches[0].length         // how big is the indent
    let re = RegExp(`\n {${initial}}`, 'g') // remove these at the beginning of lines
    return str.replace(re, '\n')
  }

let str = `
  <html>
    <head>
    </head>
    <body>
        <div>
           some text
        </div>
    </body>
  </html>
`  
console.log(MyFunction(str))

You can split text by \n, find indentation in first revelant line and remove it from the rest of line, then join it again.

MyFunction = function () {
	let indent = "";
	console.log(`
    <html>
      <head>
      </head>
      <body>
      </body>
    </html>
  `.split("\n").reduce((lines, line) => {
		if (!indent.length && line.trim()) {
			indent = line.match(/^(\s+)/)[0];
		}
		lines.push(line.replace(indent, ""));
		return lines;
	}, []).filter(line => line.length).join("\n"));
};
MyFunction();

There are, of course, a thousand ways to get to your destination. To make only the indent of the content disappear you can use the following method with your template strings. This ensures that only the indent created by the template string disappears, but the basic formatting remains intact.

function trimIndent(strings, ...values) {
    const result = new Array(strings.length);
    result[0] = strings[0].replace(/^\n/, '');
    const endIndex = strings.length - 1;
    result[endIndex] = strings[endIndex].replace(/\n$/, '');

    var indent = result[0].match(/^\s+/g);
    result[0] = result[0].replace(/^\s+/, '');

    for (let i = 0, m = result.length; i < m; i++) {
        var input = result[i] ?? strings[i];
        result[i] = input.replace(new RegExp('\n' + indent, "gm"), '\n');
    }

    return result.flatMap((value, index) => {
        return value + (index < values.length ? values[index] : '')
    }).join("");
}

// example call:
var user = {
  id: 10,
  name: "Kevin",
  
}
if (true) {
  console.log(trimIndent`
      <div>
        <span>ID: ${user.id}</span>
        <span>
          Username: ${user.name}
        </span>
      </div>
  `);
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - Javascript remove whitespaces in `strings` - Stack Overflow

8 Answers 8

与本文相关的文章

评论列表(0)