如何在Cypress中从字符串中移除空格

Question

我正在尝试从代表货币的数字值中删除空格。

例如，我想要将 1 000 kr 转换为 1000。当货币为 10 000 时也是同样情况。

我使用这个函数来删除 kr，但是当我尝试添加另一个 .replace 时它不起作用：

Cypress.Commands.add('currency', (selector) => {
      cy.get(selector)
        .children()
        .eq(1)
        .invoke('text') // get text
        .then((text) => +text.replace('kr', '').trim());
    });

我该如何添加另一个.replace以去除数字值中的额外空格？

- qatester123

---

使用正则表达式怎么样？ - evolutionxbox

Answer 1

这应该可以正常工作：

function formatString(text) {
    return text.replace('kr', '').replace('\u00A0','').trim();
}

Cypress.Commands.add('currency', (selector) => {
      cy.get(selector)
        .children()
        .eq(1)
        .invoke('text') // get text
        .then(formatString)
    });

但是你也可以使用Cypress通过正则表达式字符串来实现这一点（在Cypress FAQ中的第一个示例与你的类似）：

Cypress.Commands.add('currency', (selector) => {
      cy.get(selector)
        .should('have.text', '\d+[\u00A0]*')
    });

您可以在此处测试正则表达式。它将匹配以数字开头，后跟一个空格和任何后续字符的字符串。您可以使用复杂的正则表达式来测试您想要的内容。

如果匹配正则表达式模式无法解决问题，我的最后建议是，您可以将Cypress命令封装在一个函数中，该函数将文本内容作为参数，然后通过传递到should('have.text', ...) 行中。

- Katie McCulloch

---

你的正则表达式有点可疑，只匹配了4个数字而没有匹配到空格。 - user15239601

您可以在此处 https://regex101.com/r/YC4szy/1 查看 Javascript 环境中检测到的 nbsp。如果您需要另一种语言的编码，请在该链接中进行尝试（通过更改左侧的“Flavor”并替换正确的 nbsp 编码字符：https://www.fileformat.info/info/unicode/char/00a0/index.htm（请参见编码部分）。 - Katie McCulloch

你的示例需要另一种语言来工作，那就是HTML。不幸的是，在regex101.com上没有这个选项。 - user15239601

Answer 2

 是一种不换行的空格，与“常规”的换行空格不同:

const read = sel => document.querySelector(sel).textContent;

console.log(read('div') === '1 000 kr'); // false!

<div>1&nbsp;000 kr</div>

这两个空白字符实际上具有不同的ASCII码：

const read = sel => document.querySelector(sel).textContent;
const strencode = str => [...str].map(c => c.charCodeAt(0)).join('\t');

console.log(strencode('1 000 kr'));
console.log(strencode(read('div')));

<div>1&nbsp;000 kr</div>

看看第二个字符有什么不同吗？

您可以使用String#normalize来对字符串进行规范化：

const read = sel => document.querySelector(sel).textContent;

console.log(read('div').normalize('NFKC') === '1 000 kr')

<div>1&nbsp;000 kr</div>

所以这是你问题的一个可能答案：

1. 规范化你的字符串
2. 使用 / /g 删除所有空格（ascii 32）字符
3. 删除末尾的 'kr'

const read = sel => document.querySelector(sel).textContent;
const clean = str => str.normalize('NFKC').replace(/ /g, '').replace(/kr$/, '');

console.log(clean(read('#div1')));
console.log(clean(read('#div2')));

<div id="div1">1&nbsp;000 kr</div>
<div id="div2">10&nbsp;000</div>

- customcommander

Answer 3

请查看JavaScript字符串中如何表示不间断空格？。

在执行.text()时，所有HTML实体都被解码为它们的字符值。与其使用实体进行比较，不如使用实际的原始字符进行比较。

这是您要寻找的表达式:

if (x == '\xa0') { // 不间断空格是字符0xa0（160十进制）

+text.replace('kr', '')  
  .replace('\xa0', '')
  .trim()

测试使用

<div>1&nbsp;100 kr</div>

- user14783414

Answer 4

为了阐述 @evolutionxbox 的想法，您可以在 element.innerText 上使用正则表达式来替换非打断空格。

Cypress.Commands.add('currency', (selector) => {
  cy.get(selector)   
    .children()
    .eq(1) 
    .then($el => +$el[0].innerText.replace(/\s/g, '').replace('kr', '') )
})

- user15239601