正则表达式将html类转换为属性

Question

是否可以单独使用正则表达式或在javascript的帮助下执行以下操作

从…

<div class="type-c red blue"> 

至

<div type="c" class="red blue"> 

Answer 1

无论"type-xxx“在class属性中的位置如何，这个正则表达式都将与您所描述的匹配。

/class="([^"]*)type-(\w+)([^"]*)"/g

与字符串替换组合

let value = '<div class="type-a b">test</div><div class="a type-b">test 2</div>';
value.replace(/class="([^"]*)type-(\w+)([^"]*)"/g, 'type="$2" class="$1$3"');

这将产生结果。

<div type="a" class="b">test</div><div type="b" class="a">test 2</div>

Answer 2

您甚至不需要正则表达式。

(好的，您可以这样做，但只能在x中找到type-x值。证明这里.)

您可以混合使用属性选择器、*属性标准和元素.setAttribute()方法。

下面是一个例子。

​

function doChange() {

  // Find all divs with a 'type-x' class
  let myDivs = document.querySelectorAll('div[class*="type-"]');

  myDivs.forEach(curDiv => {

      // Get the specific 'x' for the type
      let curType = /(?<=type-)[A-Za-z\-]+/.exec(curDiv.classList.toString())[0];

      // Set the 'data-type' attribute
      curDiv.setAttribute('data-type', curType);

      // Remove the 'type-x' class
      curDiv.classList.toggle('type-' + curType);

      // Write the 'classList' and 'data-type' attributes for show
      curDiv.innerText = 'classList: ' + curDiv.classList 
                       + '; data-type: ' + curDiv.getAttribute('data-type') + ';';

  });
}

<div class="type-a red blue">classList: type-a red blue; data-type: undefined;</div>
<div class="red type-b blue">classList: red type-b blue; data-type: undefined;</div>
<div class="red blue type-c">classList: red blue type-c; data-type: undefined;</div>

<button onclick="doChange()">Click Me</button>

​

Answer 3

，这不是解决办法。只是在没有正则表达式的情况下提供了一些关于文本解析这个问题的见解。正如OP提到了一种可能的非正则表达式解决方案，也在一个非常长的评论会话中发布了这个答案，因此需求发生了变化。

这个解决方案(类似@DakotaMethvin的方式)也试图在不使用regex的情况下解决它，并且与class="type-有一个更精确的模式匹配。因此，如果不匹配，下面的代码确实会中断(逻辑上)。

然而，鉴于范祥最近的评论[type-x] not always the first class entry，我只是张贴这个答案，因为我已经开始张贴它。

​

function replaceIt( s, sentinel ) {
    // sentinel: e.g. class="type-
    if (sentinel) {
    
    }
    else sentinel = 'class="type-';
    
    return s.replaceAll(sentinel , function( match, offset ) {
        
        // get the position of the whitespace after "type-c"
        nextSpace = s.indexOf(" ", offset);
        
        // extract the "type" up until and excluding the "next space"
        typeVar = s.substring( offset + sentinel.length, nextSpace);
        
        // get the position of the 2nd double quote char 
        nextDoubleQuote = s.indexOf("\"", nextSpace);
        
        // extract the new "class" names e.g. red blue
        newClass = s.substring( nextSpace + 1, nextDoubleQuote);
        
        // create the replacement string. Also something must be done with the leftover chars; prepend them with 'data-source'.
        replacement = 'type="' + typeVar + '" class="' + newClass +'" data-source="'; 
        
        // debugging code
        console.log( match + ": " + offset + ": " + typeVar + ": " + newClass);
        
        return replacement;
    });
    
}

console.log( replaceIt( '<div class="type-c red blue">') );

​

但是，正如我在The entire before "class" string will have to be tokenized.上所指出的最近的发展所指出的那样，这个解决方案只能在"type-“是第一类的情况下起作用。