主页 / 问题 / 1185646
Accepted
Black Fire
Asked:2020-10-03 21:43:52 +0000 UTC2020-10-03 21:43:52 +0000 UTC

复制到剪贴板不起作用，正则表达式正在改进

  • 772

该程序会产生如下标记：

<ul>
< li>цвет: синий< / li>
< li > Материал: ПВХ< / li>
< li>Размер: 80 * 40см < / li>
< li>вес: 123 г< / li>
</ul>

以这种形式：

<ul>
<li>цвет: синий</li>
<li> Материал: ПВХ</li>
<li>Размер: 80 * 40см </li>
<li>вес: 123 г</li>
</ul>

问题：

  1. 如何完成以使>开始标签的右侧和结束标签的左侧<没有空格。
  2. 后面的第一个字母必须>大写，如果不是大写的话。
  3. 以前，通过单击“复制”按钮，所有内容都被复制到缓冲区，现在它不起作用。如何返回？

'use strict'
const inp = document.querySelector('#input');
const out = document.querySelector('#output');
const btn = document.querySelector('#fix');
const writeBtn = document.querySelector('#copy');
let pre_content = '';

btn.addEventListener('click', () => {
  const text = inp.value;
  output.innerText = text.replace(/<\s*(\/)?\s*([^>\s]+)\s*(\s[^>]*)?>/g, '<$1$2$3>');
  pre_content = output.textContent; 
});
writeBtn.addEventListener('click', () => {
  navigator.clipboard.writeText(pre_content)
});
button {
    background: #22c1c3;
    border: none;
    border-radius: 25px;
    width: 150px;
    height: 45px
}
<button id="copy">Copy</button>
<hr/>
<textarea id="input" cols="75%" rows="10"></textarea>
<pre id=output></pre>
<hr/>
<button id="fix">Fix</button>

javascript

1 个回答

  1. Best Answer

    为了防止在标签之间的文本中删除反斜杠周围的空格，建议进行两次替换（并且正则表达式更清晰、更简单）：

    'use strict'
const inp = document.querySelector('#input');
const out = document.querySelector('#output');
const btn = document.querySelector('#fix');
const writeBtn = document.querySelector('#copy');
let pre_content = ``;

btn.addEventListener('click', () => {
  let text = inp.value;
  // Удаляем лишние пробелы
  text = text.replace(/\u0020*([<>])\u0020*/g, '$1').replace(/\u0020*((?:<)\/)\u0020*/g, '$1');
  // Делаем первую букву содержимого тегов заглавной
  text = text.replace(/>(.)(.+)</g, function(match, p1, p2) {
    return `>${p1.toUpperCase()}${p2}<`;
  });

  output.innerText = text;

  pre_content = output.textContent;
});
writeBtn.addEventListener('click', () => {
  navigator.clipboard.writeText(pre_content);
});
    button { height: 45px; width: 150px; border: none; border-radius: 25px; background: #22c1c3; }
    <button id="copy">Copy</button>
<hr/>
<textarea id="input" cols="75%" rows="10"><ul>
< li>цвет: синий< / li>
< li > Материал: ПВХ< / li>
< li>Размер: 80 * 40см < / li>
< li>вес: 123 г< / li>
</ul></textarea>
<pre id=output></pre>
<hr/>
<button id="fix">Fix</button>

    • 2

相关问题