regex JavaScript正则表达式替换除contains word之外的所有内容

bfnvny8b  于 2023-05-19  发布在  Java
关注(0)|答案(3)|浏览(105)

我想这是微不足道的,但我正在努力与以下情况:
字符串(HTML作为文本传递):

text<br>text<br><ul><li>text</li></ul><br>

现在我需要用<div>text</div>替换每个text<br>,除非文本在<li>/<ul>中。

.replace(/(.*?)<br>/g, '<div>$1</div>')

这工作正常,但如何防止<ul><li>text</li></ul><br>被替换?

yizd12fk

yizd12fk1#

这是我在要求一个(更短的)正则表达式解决方案之前的尝试:

const dFrag = document.createDocumentFragment();
str.textContent.split('<br>').forEach(substr => {
  const div = document.createElement('div');
  let ul;
  if (!substr) {
    substr = '<br>';
  }
  div.innerHTML = substr;
  ul = div.querySelector('ul');
  if (ul) {
    dFrag.appendChild(ul);
  } else {
    dFrag.appendChild(div);
  }
});
str.innerHTML = '';
str.appendChild(dFrag);
jtw3ybtb

jtw3ybtb2#

"You can't parse [HTML] with regex. [...] Have you tried using an [HT]ML parser instead?"
(更简洁的版本可以在下面的片段中找到)

function replaceTextBrWithDiv(html) {
  // Create an element that acts as a parser
  const parser = document.createElement('div');
  parser.innerHTML = html;

  // Modify an array-like when iterating over it may cause some issues.
  // Copy it first.
  const childNodes = [...parser.childNodes];

  // Index-based iterating
  for (let index = 0; index < childNodes.length; index++) {
    const node = childNodes[index];
    const nextNode = childNodes[index + 1];

    if (node instanceof Text && nextNode instanceof HTMLBRElement) {
      const div = document.createElement('div');

      // Remove text node from parser and append it to div
      div.appendChild(node);
      nextNode.replaceWith(div);

      // Skip next node (i.e. <br>)
      index++;
    }
  }

  return parser.innerHTML;
}

试试看:

console.config({ maximize: true });

function replaceTextBrWithDiv(html) {
  const parser = document.createElement('div');
  parser.innerHTML = html;

  parser.childNodes.forEach((node, index, nodes) => {
    const nextNode = nodes[index + 1];
    
    if (node instanceof Text && nextNode instanceof HTMLBRElement) {
      const div = document.createElement('div');
      div.appendChild(node);
      nextNode.replaceWith(div);
    }
  });
  
  return parser.innerHTML;
}

const content = 'text<br>text<br><ul><li>text</li></ul><br>';

console.log(replaceTextBrWithDiv(content));
<script src="https://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
q7solyqu

q7solyqu3#

如果你更喜欢使用正则表达式,可以使用 /(?!<li.?>)(?!)(?!<ul.?>)(?!)(.?)
/g*

const html = 'text<br>text<br><ul><li>text</li></ul><br>';
const regex = /(?!<li.*?>)(?!<\/li>)(?!<ul.*?>)(?!<\/ul>)(.*?)<br>/g;
const replacedHtml = html.replace(regex, '<div>$1</div>');
console.log(replacedHtml);

但是如果您切换到HTML解析器来轻松地导航和修改HTML内容的结构,那就更好了

相关问题