javascript Regex替换html并在div上添加间距

wgx48brx  于 2023-05-12  发布在  Java
关注(0)|答案(2)|浏览(81)

你好,我想帮助创建一个正则表达式,取代所有的html标签,但当有一个结束div和开始div旁边的对方增加了一个空格,所以例如
This <b>is</b> <div>a</div><div>test</div>
This is a test
我目前的正则表达式是/(<([^>]+)>)/IG,它将替换所有的html标签,但我想知道当有一个关闭的div和一个开始的div相邻时,我如何添加一个空格。
我试着用/(<([^>]+)>)/IG来替换HTML,这是可行的,但是当div彼此相邻时,我需要帮助来调整div的间距

axkjgtzd

axkjgtzd1#

JS内置了HTML解析支持。用这个代替:

function getSpaceSeparatedText(html) {
  // Create an element and use it as a parser
  let parser = document.createElement('div');
  
  parser.innerHTML = html;
  
  const result = [];
  
  for (const node of parser.childNodes) {
    // Get the trimmed text
    const text = node.textContent.trim();
    
    // If text is not empty, add it to result
    if (text) {
      result.push(text);
    }
  }
  
  return result.join(' ');
}

试试看:

console.config({ maximize: true });

function getSpaceSeparatedText(html) {
  let parser = document.createElement('div');
  
  parser.innerHTML = html;
  
  const result = [];
  
  for (const node of parser.childNodes) {
    const text = node.textContent.trim();
    
    if (text) {
      result.push(text);
    }
  }
  
  return result.join(' ');
}

const html = `
This <b>is</b> 
<div>a</div><div>test</div>
`;

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

xpszyzbs2#

更新:在顶部添加一个新组会导致后续反向引用偏移1。

  • 已被修复 *

这将删除所有HTML标记和不可见内容(https://regex101.com/r/2ACiDg/1),
但是你需要一个回调函数来在一个关闭的div和一个打开的div之间插入一个空格。

var text = "This <b>is</b> <div>a</div><div>test</div>"
text = text.replace(/(<\/div\s*><div\s*>)|<(?:(?:(?:(script|style|object|embed|applet|noframes|noscript|noembed)(?:\s+(?=((?:"[\S\s]*?"|'[\S\s]*?'|(?:(?!\/>)[^>])?)+))\3)?\s*>)[\S\s]*?<\/\2\s*(?=>))|(?:\/?[\w:]+\s*\/?)|(?:[\w:]+\s+(?:"[\S\s]*?"|'[\S\s]*?'|[^>]?)+\s*\/?)|\?[\S\s]*?\?|(?:!(?:(?:DOCTYPE[\S\s]*?)|(?:\[CDATA\[[\S\s]*?\]\])|(?:--[\S\s]*?--)|(?:ATTLIST[\S\s]*?)|(?:ENTITY[\S\s]*?)|(?:ELEMENT[\S\s]*?))))>/g, function(match, grp1)
    {
       if ( grp1 > "" ) 
          return " "; 
       else
          return ""
    }
);

console.log( text );

相关问题